一、js有三种图表库,Plotly.js是其中一种。
Plotly.js拥有四十多种图表类型,包括3D地图,svg地图,统计图等
二、Plotly的使用
(一)准备工作,引入该js文件
- 先在官网下载js文件(github地址:https://github.com/plotly/plotly.js)
- 将文件放入到项目中的js目录
- 引入到页面:
<script src="js/plotly.js-2.25.1/dist/plotly.js"></script>
(二)散点图尝试
<body>
<div id="myChart" width="70%">图表要用的容器</div>
<script>
//首先确定横纵列表的数据,这里以我的两年来的绩点作为数据,后两年为估计
var yMyGrade = [3.43,3.6,3.66,2.99,2.5,2.7,3.0,2.0];
var XIterm = ["第一学期","第二学期","第三学期","第四学期","第五学期","第六学期","第七学期","第八学期"];
//定义数据
var data = [{
x: XIterm,
y: yMyGrade,
mode: "markers"
}]
//定义布局
var layTo = {
xaxis:{range:XIterm,title:"学期"},//定义x轴的标题和范围
yaxis:{range: [1.5,4],title:"绩点"},//定义散点图的y轴标题和范围
title: "学期成绩涨落散点图"//定义散点图的标题
}
//调用plotly
Plotly.newPlot("myChart",data,layTo);
</script>
<body>
(三)折线图
- 方式大概相同,只有数据确定中mode部分略有不同,注意即可
<body>
<div id="myChart" width="70%">图表要用的容器</div>
<script>
//首先确定横纵列表的数据,这里以我的两年来的绩点作为数据,后两年为估计
var yMyGrade = [3.43,3.6,3.66,2.99,2.5,2.7,3.0,2.0];
var XIterm = ["第一学期","第二学期","第三学期","第四学期","第五学期","第六学期","第七学期","第八学期"];
//定义数据
var data = [{
x: XIterm,
y: yMyGrade,
mode: "lines",
type: "scatter"//类型,直译为分散;
}]
//定义布局
var layTo = {
xaxis:{range:XIterm,title:"学期"},//定义x轴的标题和范围
yaxis:{range: [1.5,4],title:"绩点"},//定义散点图的y轴标题和范围
title: "学期成绩涨落散点图"//定义散点图的标题
}
//调用plotly
Plotly.newPlot("myChart",data,layTo);
</script>
<body>
- 下面条形图,仅展示不同部分代码
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.jsgge
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js">
- 将要绘制的地方用<canvas>标签标注出来
<canvas id="chartsTest"></canvas>
- 用Charts的经典结构是:
var myData = new Chart("chartsTest",{
type: "",
data: {}
option:{}
})
- 结构看起来短小精悍,其实当中最为玄妙,下面让我们来一块探究下其中的组成部分。
- options当中可以有哪些结构?
- events:["click"|"mousemove"|"touchstart"等等]规定图标的绘制会响应哪些事件。
- onHover: function (){}; 当任何事件触发图表时执行的函数;
- onClick:function(){};当"mouseup"和"click"事件触发图表时要执行的函数。
- tooltips:{} 设置人将鼠标悬停到图表交互的内容上时的交互模式,里面可以填的值有
- mode:"point|等等" 显示焦点数据
看了官网,很多弯弯绕,暂时搞不懂先放一放,有缘人看到了直接去官网,别怪我!布局(layout) · GitBook
五、谷歌图表
(一)使用
- 首先还是要引入js文件,如下
<script src="https://www.gstatic.com/charts/loader.js"></script>
- 然后声明div容器:
<div id="googleTest"></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);
但最后浏览器报错:
表格到此为止吧。