js图表库之Plotly.js

一、js有三种图表库，Plotly.js是其中一种。

Plotly.js拥有四十多种图表类型，包括3D地图，svg地图，统计图等

二、Plotly的使用

(一)准备工作，引入该js文件

• 先在官网下载js文件（github地址：https://github.com/plotly/plotly.js）
• 将文件放入到项目中的js目录

• 引入到页面：

（二）散点图尝试

图表要用的容器

 （三）折线图

• 方式大概相同，只有数据确定中mode部分略有不同，注意即可

图表要用的容器

•  下面条形图，仅展示不同部分代码

vvar data = [{
    x: XIterm,
    y: yMyGrade,
    type: "bar",

}]

•  饼状图

//定义数据
var data = [{
    labals: XIterm,
    values: yMyGrade,//用饼状图将xy改为labals和values即可
    type: "pie", //类型饼状图

}]
//定义布局
var layTo = {
    title: "学期成绩涨落散点图"//定义饼状图只需要标题
}
//调用plotly
Plotly.newPlot("myChart",data,layTo);

 三、Chart.js图表库

该图表库包括的图表类型很常用一共九种：散点图、折线图、饼图、甜甜圈图、条形图、气泡图、面积图、雷达图、混合图

四、Chart.js的使用

（一）使用前的准备

• 引入网址定向的js文件，文件地址如下：https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js​​​​​​​gge

• 然后声明div容器：

•  多了一步，就是要加载google graph的api

//加载 Visualization API 和 corechart 包
   google.charts.load("current",{packages:"corechart"});
   //设置一个回调函数，在 API 加载完成后进行调用
   google.charts.setOnloadCallback(drawChart);

• 然后就是下面的三个步骤：

//设置数据
   var data = google.visualization.arrayToDataTable([
    ["grade","iterms"],
    [3.43,"第一学期"],[3.6,"第二学期"],[3.66,"第三学期"],
    [2.99,"第四学期"],[2.5,"第五学期"],[2.7,"第六学期"],
    [3.0,"第七学期"],[2.0,"第八学期"]
   ]);
   //设置选项
   var options ={
    title: "成绩变化图",//表的标题
    hAxis: {title:"学期"},//表的水平轴的标题
    vAxis: {title:"成绩"},//表的垂直轴的标题
    legend: "none"
   }
   //绘制图表
   var container = document.getElementById("googleTest");
   //创建新的谷歌表格对象
   var bobo = new google.visualization.LineChart(container);
   //执行绘制方法
   bobo.draw(data,options);

但最后浏览器报错：

 表格到此为止吧。