chart.js笔记

最新推荐文章于 2024-05-31 06:57:39 发布

露西恩

最新推荐文章于 2024-05-31 06:57:39 发布

阅读量915

点赞数

分类专栏：前后端文章标签： Chart.js

前后端专栏收录该内容

1 篇文章

订阅专栏

1.引入Chart.js库

2.设置画布及样式

//需要固定尺寸时需要在options中设置 responsive : false
12

3.获取画布对象

//适应多种选择器
var ctx = document.getElementById(“myChart”);
var ctx = document.getElementById(“myChart”).getContext(“2d”);
var ctx = $("#myChart");
var ctx = $("#myChart")[0];
var ctx = “myChart”;123456

4.初始化图表
4.1（2.0+）

var chartInstance = new Chart(ctx, {
type : ‘line’,
//图表数据
data : data,
//图表参数
options : options
});1234567

4.2（1.0+）

var myLineChart = Chart.Line(ctx, {
data : data,
options : options
});1234

4.3

//图表样式
type : {
line : 曲线图,
bar : 柱状图,
horizontalBar : 横向柱状图,
radar : 蜘蛛网（雷达）图,
polarArea : 极地区域图,
pie : 饼状图,
doughnut : 甜甜圈图,
bubble : ？？？
}1234567891011

5.图表数据

data : {
//数据标签，字符串数组
labels : [“标签1”, …],
//数据集，object数组
datasets : [{}, …],
//xy轴标签
xLabels : ["", …],
yLabels : ["", …]
}, 123456789

5.1曲线图 :
5.1.1 : 曲线图数据

datasets :{
//当前数据组名 --》 String
label : “2015”,
//数据同外层labels对应 --》 Array
data : [65, 59, 90, 81, 56, 55, 40],
// TODO --》 String
xAxisID : “”,
yAxisID : “”,
//是否填充(线条下方区域填充) --》 Boolean
fill : true,
// TODO --》 String
cubicInterpolationMode : “”,
//贝塞尔曲线值为0时为折线图 --》 Number
lineTension : 0,
//线下填充色，=fillColor --》 Color
backgroundColor : “rgba(220, 220, 220, 0.5)”,
//线条宽度 --》 Number
borderWidth : 3,
//线条颜色，=strokeColor --》 Color
borderColor : “rgba(220, 220, 220, 0.5)”,
// TODO --》 String
borderCapStyle : “”,
//线条样式 : 虚线 --》
borderDash : [1, …],
borderDashOffset : 1,
borderJoinStyle : “”,
//点外圈颜色 --》 Color or Array
pointBorderColor : “rgba(220, 220, 220, 0.5)”,
//点的颜色 --》 Color or Array
pointBackgroundColor : “rgba(220, 220, 220, 0.5)”,
//点外圈宽度 --》 Number or Array
pointBorderWidth : 3,
//点半径 --》 Number or Array
pointRadius : 3,
// TODO --》 Number or Array
pointHitRadius : 3,
//鼠标悬浮时点半径 --》 Number or Array
pointHoverRadius : 3,
//鼠标悬浮时点的颜色 --》 Color or Array
pointHoverBackgroundColor : “rgba(220, 220, 220, 0.5)”,
//鼠标悬浮时点边框颜色 --》 Color or Array
pointHoverBorderColor : “rgba(220, 220, 220, 0.5)”,
//鼠标悬浮时点半径 --》 Number or Array
pointHoverBorderWidth : 3,
//点的样式 --》 String, Array, Image, Array
pointStyle : “triangle”,
//是否绘制线条 --》 Boolean
showLine : true,
//有空数据时是否绘制 --》 Boolean
spanGaps : false,
//是否为阶梯图
steppedLine : false
}1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253

6.options
6.1 全局options

options : {
//是否自适应尺寸 --》 Boolean
responsive : true,
//缩放时绘制图标时间 --》 Number
responsiveAnimationDuration : 0,
//缩放时是否保持长宽比 --》 Boolean
maintainAspectRatio : true,
//悬停事件触发时机 --》 Array
events : [“mousemove”, “mouseout”, “click”, “touchstart”, “touchmove”, “touchend”],
//点击事件 --》 function
onClick : function(){},
//缩放时调用 --》 function
//获取两个参数 : 图表实例及新尺寸
onResize : function(chart, size){},
// TODO
legendCallback : function (chart) {},
}1234567891011121314151617

6.2 layout 布局

options : {
//设置图表内边距 --》 Number or Object
layout : {
padding : {
left : 10,
top : 20
}
}
}123456789

6.3 title 标题

options : {
title : {
//是否显示，默认否 --》 Boolean
display : false,
//标题显示位置 --》 String
//‘top’, ‘left’, ‘bottom’, ‘right’.
position : “top”,
//宽屏布局 TODO --》 Boolean
//标题是否贴边显示、全屏居中
fullWidth : true,
//标题样式
fontSize : 12,
fontFamily : “‘Helvetica Neue’, ‘Helvetica’, ‘Arial’, sans-serif”,
fontColor : “bold”,
//标题上下边距 --》 Number
padding : 10,
//标题文本内容 --》 String
text : “”
}
}1234567891011121314151617181920

6.4 legend 图例

options : {
legend : {
//是否显示， --》 Boolean
display : true,
//标题显示位置 --》 String
//‘top’, ‘left’, ‘bottom’, ‘right’.
position : “top”,
//宽屏布局 TODO --》 Boolean
//标题是否贴边显示、全屏居中
fullWidth : true,
//TODO 如何添加事件并调用原来的function
//点击时触发 --》 function
onClick : function(event, legendItem) {},
//鼠标悬浮时触发 --》 function
onHover : function(event, legendItem) {},
//图例标签 --》 object
labels : null,
//是否颠倒显示 --》 Boolean
reverse : false
}
}123456789101112131415161718192021

6.4.1 labels 图例标签

options : {
legend : {
labels : {
//图例框宽度 --》 Number
boxWidth : 40,
//图例字体样式
fontSize : 12,
fontStyle : “normal”,
fontColor : “#666”,
fontFamily : “‘Helvetica Neue’, ‘Helvetica’, ‘Arial’, sans-serif”,
//图例上下边距 --》 Number
padding : 10,
//图例生成时触发 --》 function
generateLabels : function(chart) {}
//是否以点显示图例 --》 Boolean
//设置为true时boxWidth无效
usePointStyle : false
},
}
}1234567891011121314151617181920

6.5 line 曲线图

options: {
elements : {
line : {
//曲线张力，为0时为拉伸状态 = lineTension
tension : 0.4,
backgroundColor : rgba(0,0,0,0.1),
borderWidth
borderColor
borderCapStyle
borderDash
borderDashOffset
borderJoinStyle
capBezierPoints
fill
stepped
}
}
}123456789101112131415161718

6.6 悬停

options: {
hover : {
intersect : true,
//悬停标签出现动画时间
animationDuration : 400,
//悬停事件，注意需要限制触发
onHover ： null，
}
}123456789

6.7 动画

options: {
animation : {
//动画显示时间，为0时为不显示
duration ： 1000，
//动画样式
easing ：“easeOutQuart”，
//动画绘制每个过程调用
onProgress ： null，
//动画绘制完成调用
onComplete ： null，
}
}123456789101112

6.7.1 动画样式（http://www.runoob.com/jqueryui/api-easings.html）

‘linear’, ‘easeInQuad’, ‘easeOutQuad’, ‘easeInOutQuad’, ‘easeInCubic’, ‘easeOutCubic’, ‘easeInOutCubic’, ‘easeInQuart’, ‘easeOutQuart’, ‘easeInOutQuart’, ‘easeInQuint’, ‘easeOutQuint’, ‘easeInOutQuint’, ‘easeInSine’, ‘easeOutSine’, ‘easeInOutSine’, ‘easeInExpo’, ‘easeOutExpo’, ‘easeInOutExpo’, ‘easeInCirc’, ‘easeOutCirc’, ‘easeInOutCirc’, ‘easeInElastic’, ‘easeOutElastic’, ‘easeInOutElastic’, ‘easeInBack’, ‘easeOutBack’, ‘easeInOutBack’, ‘easeInBounce’, ‘easeOutBounce’, 'easeInOutBounce’1

6.8 elements（http://www.chartjs.org/docs/#chart-configuration-element-configuration）

6.9 tooltips

options: {
tooltips : {
//启用
enabled : true,
//定制
custom
mode
//是否在交叉点显示
intersect
//显示位置
position
//背景
backgroundColor
titleFontFamily
titleFontSize
titleFontStyle
titleFontColor
}
}12345678910111213141516171819

7.混合图表类型

当创建图表，你必须设置总type为bar。
当创建一个图表，你必须对彼此顶部作为单独的数据集覆盖不同的图表类型的选项。
要做到这一点，你必须设置一个type单独为每个数据集。您可以创建混合图表类型酒吧和线图表类型。

★   1.悬浮框颜色随数据点颜色 
     2.图例框颜色随线条及填充颜色 
     3.数据点颜色随线条及填充颜色

8.数轴设置（http://www.chartjs.org/docs/#scales）

options: {
scales : {
yAxes : [{
gridLines ： {}
}]
}
}1234567

8.1 设置固定尺寸

options: {
scales : {
yAxes : [{
ticks : {
min : 0,
max : 20
}
}]
}
}

本文来自云声的CSDN 博客，全文地址请点击：https://blog.csdn.net/w773279595/article/details/53739877?utm_source=copy