canvasjs 图表库的入门介绍

官网

canvasjs图标库的官网：https://canvasjs.com/jquery-charts/

下载示例代码

进入这个下载页面之后，就可以直接下载的了。

查看下载好的示例代码

可以看到主要有11个示例，下面随便点击任意一个示例来看看。

查看 01 - overview 的图表示例

进入查看 overview 图表示例里面也有16个示例，可以说是真的示例图很丰富。

下面打开几个图表来看看。

animated-chart.html

chart-from-json-data.html

chart-with-axis-scale-breaks.html

chart-with-crosshair.html

chart-with-custom-legend-chart.html

chart-with-image-overlay.html

这里面的图表示例很多，就不一一列举，下面来看看，怎么运用其中一个图表。

修改 interactive-draggable-chart.html 的数据

这个柱形图的填写数据比较简单，所以就用这个来介绍看看。

查看引入了什么js以及css文件

可以从源码看到，这个图表的实现只引用了两个js，以及写了一个div。另外，在文件里面也写了一些js代码。

这里的只需要将 x 和 y 轴的值修改，就可以直接修改图表的内容了。