google line chart 例子

最新推荐文章于 2017-05-15 12:16:00 发布

guo_rui22

最新推荐文章于 2017-05-15 12:16:00 发布

阅读量2k

点赞数

分类专栏： 5、Web开发文章标签： google visualization function xhtml null string

本文链接：https://blog.csdn.net/guo_rui22/article/details/5466512

版权

5、Web开发专栏收录该内容

69 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>
      Google Visualization API Sample
    </title>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1', {packages: ['linechart']});
      google.setOnLoadCallback(drawVisualization);
      var chart;

      function drawVisualization() {
        // Create and populate the data table.

          var data = new google.visualization.DataTable();
              data.addColumn('string', 'Year');
              data.addColumn('number', '销售');
              data.addColumn('number', '利润');
              data.addRows(4);
              data.setValue(0, 0, '2004');
              data.setValue(0, 1, 1000);
              data.setValue(0, 2, 400);
              data.setValue(1, 0, '2005');
              data.setValue(1, 1, 1170);
              data.setValue(1, 2, 460);
              data.setValue(2, 0, '2006');
              data.setValue(2, 1, 860);
              data.setValue(2, 2, 580);
              data.setValue(3, 0, '2007');
              data.setValue(3, 1, 1030);
              data.setValue(3, 2, 540);

              chart = new google.visualization.LineChart(document.getElementById('visualization'));
              chart.draw(data, {width: 1024, height: 300,tooltipFontSize:14,max:1250, smoothLine:'true',pointSize:6,legend: 'bottom', titleFontSize:18, title: '板卷厂综合和一次合格率'});

        google.visualization.events.addListener(chart, 'onmouseover', barMouseOver);
    google.visualization.events.addListener(chart, 'onmouseout', barMouseOut);
      }

// Add our over/out handlers.


function barMouseOver(e) {
    chart.setSelection([e]);
}

function barMouseOut(e) {
    chart.setSelection([{'row': null, 'column': null}]);
}

    </script>
</head>
<body style="font-family: Arial;border: 0 none;">
    <div id="visualization" style="width: 300px; height: 300px;"></div>
</body>
</html>

guo_rui22

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
google line chart 例子

copyright (c) 2009 Google inc. You are free to copy and use this sample. License can be found here: http://code.google.com/apis/ajaxsearch/faq/#license--> Go
复制链接

扫一扫