一. 先了解一下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的简单设置就介绍到这里了.