google chart 生成svg矢量图

  • 这段时间由于论文需求,需要画矢量图(类似折线图,饼状图这种,不是visio那种),但是一直没找到合适的工具,突然看到google chart是画的图是svg, 所以接下来我们就用google chart来画我们的折线图SVG
  • 首先需要引入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);

      }});
  }
})

最后放张效果图
image
开源代码:
draw_line

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值