要实现chart.js绘制图表的功能
首先第一步,导入chart.js
文件
<script type="text/javascript" src="js/chart1.js" ></script>
第二步,在html页面中创建<canvas>
画布标签,通过外部嵌套<div>
来实现控制画布的大小
<div style="float: left;width: 5rem;height: auto;position: relative">
<canvas id="myLineChart" width="50" height="50"></canvas>
</div>
第三步,在js文件中实现图表初始化
初始化图表时的`type`属性包括<br>
1.折线图`line`<br>
2.竖向柱状图`bar`<br>
3.横向柱状图`horizontalBar`<br>
3.雷达图`radar`<br>
4.饼图`pie`<br>
4.甜甜圈图`doughnut`<br>
5.极地图`polarArea`<br>
6.气泡图`bubble`<br>
7.离散图`scatter`<br>
8.混合图表`mixed`<br>
9.区域图`area`<br>
//找到画布对象
var ctx = document.getElementById("myLineChart").getContext("2d");
//图表基本数据
var data = {};
var options = {};
//实例化图表
var myLineChart = new Chart(ctx, {
type: "line",
data: data,
options:options
});
//查看实例化的图表对象
console.log(myLineChart);
第四步,填入数据data/options
data对象中的属性包括
data: {
//x轴标签
labels:[],
//图表数据
datasets:[
{
//图例名称
label
//数据点
data
//线条颜色
borderColor
//线条宽度
borderWidth
//线条划分成破折号
borderDash
//破折号的偏移
borderDashOffset
//线帽样式
borderCapStyle
//线连接风格
borderJoinStyle
//线条背景色
backgroundColor
//对应的x轴的id
xAxisID
//对应的y轴的id
yAxisID
//是否填充线条背景色
fill
}
]
}
options对象中的属性包括
具体属性参考chartjs.bootcss.com/docs/config…
options: {
//坐标轴标记
scales: {
yAxes: [
{
//轴的刻度和网格线是否显示
display: true,
//笛卡尔轴,直角坐标轴用于折线图、条形图和气泡图。
//图表类型linear logarithmic category time
type: 'linear',
//图表位置
position: 'left',
id:'',
//网格线配置
gridLines:'',
//刻度文字
scaleLabel:'',
//刻度配置
ticks: {
//轴上数据的最大值和最小值
suggestedMin: 0,
suggestedMax: 400
}
display: true,
id: 'y-axis-1',
},
{
type: 'linear',
display: true,
position: 'right',
id: 'y-axis-2',
gridLines: {
drawOnChartArea: false
}
}
]
}
//布局配置,间距设置
layout: {},
// 覆盖全局设置,图表交互配置 events,modes
hover: {},
//动画配置
animation: {},
//图例配置,图表上出现的区域
legend: {},
//图表标题,图表顶部绘制的文本
title: {},
//提示框配置
tooltips: {},
//全局配置
//空
}