浅谈Google Line Charts

一. 先了解一下Google Charts

　　Google 官方介绍: https://developers.google.com/chart (虽然有官方文档, 不过很坑爹的是: 这个站点的内容, 大部分可以看到! 另一小部分得FQ)

二. 如何使用Google Charts: (下面的代码是Google官方的HelloWorld例子, Copy过来的, 只要你电脑有联网, 该代码片段直接能运行看到效果)

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

        var options = {
          title: 'Company Performance'
        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style=" 900px; height: 500px;"></div>
  </body>
</html>

以上代码运行结果如下图:

代码与结果均一目了然, 在此, LZ就不介绍这段代码和实现了, 所有的设置都在https://developers.google.com/chart/interactive/docs/gallery/linechart(放心, 这个Api Doc不用FQ)

那么, 大家要问了, 这TM官网都写好的东西, 让你复制过来, 有什么用啦? 闲得蛋疼?

所以, 接下来讲2个东西: 自定义ToolTip(Google网站上也有, 但LZ觉得不是很好理解) 和为每个点设置不同的颜色(官方说, google Charts 不能为多点设置不同的颜色,介于好奇, 多次尝试后取得成功)

1. ToolTip: 官方文档 https://developers.google.com/chart/interactive/docs/customizing_tooltip_content

　　在HelloWorld例子中, 当我们指向曲线图上的点时, 会显示提示信息, 这个就是ToolTip, 我们可以自定义这个提示信息:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);

    function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('string', 'Year');
        dataTable.addColumn('number', 'Sales');
        dataTable.addColumn({type: 'string', role: 'tooltip'}); // DataTable中添加的这个列便是定义Tooltip显示信息的
        dataTable.addRows([
            ['2010', 600, '$600K in our first year!'], // 对应每个列定义数据, 第一列为横坐标, 第二列为纵坐标, 第三列为每个点显示信息
            ['2011', 1500, 'Sunspot activity made this our best year ever!'],
            ['2012', 800, '$800K in 2012.'],
            ['2013', 1000, '$1M in sales last year.']
        ]);

        var options = { legend: 'none' };
        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(dataTable, options);
    }
</script>

这段代码运行结果如下:

这里, 大家会问, 如果是多条线, 怎么定义每条线每个点的提示呢?

很简单, 看例子:

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);

    function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('string', 'Year');
        dataTable.addColumn('number', 'Sales'); // 第一条曲线的Y值
        dataTable.addColumn({type: 'string', role: 'tooltip'}); // 第一条曲线上点的提示框
        dataTable.addColumn('number', 'Sales'); // 第二条曲线的Y值
        dataTable.addColumn({type: 'string', role: 'tooltip'}); // 第二条曲线点的提示框
        dataTable.addRows([
            ['2010', 600, '$600K in our first year!', 300, '$300'], // 给相应列赋值
            ['2011', 1500, 'Sunspot activity made this our best year ever!', 900, '900'],
            ['2012', 800, '$800K in 2012.', 500, '$500.'],
            ['2013', 1000, '$1M in sales last year.', 1200, '$1200 last year.']
        ]);

        var options = { legend: 'none' };
        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(dataTable, options);
    }
    </script>

效果:

OK, 关于Tooltip的简单设置就介绍到这里了.