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