google chart 生成svg矢量图

• 这段时间由于论文需求，需要画矢量图（类似折线图，饼状图这种，不是visio那种），但是一直没找到合适的工具，突然看到google chart是画的图是svg,　所以接下来我们就用google chart来画我们的折线图ＳＶＧ
• 首先需要引入google 的js

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

• 因为我们想要的效果是可以动态更新折线图的内容的，所以我们使用如下接口, 其中我们需要修改的就是success 里面的内容，我们需要将我们需要显示的数据加载进去。data.addColumn(‘number’, ‘step’); 这是加载我们的横坐标　接下来的for循环是加载我们共有多少列数据。data.addRows(show_data);是加载我们的数据。接下来就是一些显示配置的参数了：

$.ajax({  url: 'https://www.google.com/jsapi?callback',  cache: true,  dataType: 'script',  success: function () {      google.load('visualization', '1', {packages:['corechart'], 'callback' : function () {            var data = new google.visualization.DataTable();            data.addColumn('number', 'step');            for(var i=0;i<show_data_attributes.length;i++){                data.addColumn('number', show_data_attributes[i])            }            data.addRows(show_data);            var options = {                'width':400,                'height':300,                chartArea: {                    right: 130,   // set this to adjust the legend width                    left: 60,     // set this eventually, to adjust the left margin                },                legend: { position: 'right' }            };            // Instantiate and draw our chart, passing in some options.            var chart = new google.visualization.LineChart(document.getElementById('chart_div'));            chart.draw(data, options);      }});  }})

最后放张效果图

开源代码：
draw_line