js图表库之Plotly.js

最新推荐文章于 2024-07-11 19:45:30 发布

湫鹤椿水

最新推荐文章于 2024-07-11 19:45:30 发布

阅读量2.7k

点赞数 22

文章标签： javascript plotly 前端

本文链接：https://blog.csdn.net/m0_71774042/article/details/132161830

版权

一、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);

但最后浏览器报错：