一. 先了解一下Google Charts
Google 官方介绍: https://developers.google.com/chart (虽然有官方文档, 不过很坑爹的是: 这个站点的内容, 大部分可以看到! 另一小部分得FQ)
二. 如何使用Google Charts: (下面的代码是Google官方的HelloWorld例子, Copy过来的, 只要你电脑有联网, 该代码片段直接能运行看到效果)
以上代码运行结果如下图:
代码与结果均一目了然, 在此, LZ就不介绍这段代码和实现了, 所有的设置都在https://developers.google.com/chart/interactive/docs/gallery/linechart(放心, 这个Api Doc不用FQ)
那么, 大家要问了, 这TM官网都写好的东西, 让你复制过来, 有什么用啦? 闲得蛋疼?
所以, 接下来讲2个东西: 自定义ToolTip(Google网站上也有, 但LZ觉得不是很好理解) 和 为每个点设置不同的颜色(官方说, google Charts 不能为多点设置不同的颜色,介于好奇, 多次尝试后取得成功)
在HelloWorld例子中, 当我们指向曲线图上的点时, 会显示提示信息, 这个就是ToolTip, 我们可以自定义这个提示信息:
这段代码运行结果如下:
这里, 大家会问, 如果是多条线, 怎么定义每条线每个点的提示呢?
很简单, 看例子:
效果:
OK, 关于Tooltip的简单设置就介绍到这里了.