chartjs配置说明文档

大家好，欢迎来到IT知识分享网。

介绍

• chartjs是一款与echarts相似的可视化JavaScript 图表工具，提供图表类型有：柱状图、折线图、饼图、气泡图、环形图、极地图、雷达图、散点图。官网

与echarts对比

• 体积: (echarts: 1M, chartjs：200K)
• stars: (echarts: 54.3k,chartjs 60K)
• 文档：（echarts中文，chartjs英文）
• 图表类型（echarts类型非常多, chartjs固定的8种,每种都有可配置动态效果）
• chartjs适合绝大多数的场景（因为问题少稳定和社区帮助很多）。echarts适合一些复杂图形的绘制。

使用

• 安装：npm install chart.js
• 引入和使用：

  <canvas id="myBar"></canvas> import Chart from 'chart.js/auto'; // new Chart接收2个参数，分别是canvas Dom元素和配置对象 new Chart( document.getElementById('myBar'), {}//配置对象 ); 

配置对象介绍

• 配置对象结构：

{ type: 'line/bar/pie', // 类型 options: { animation: {}, // 动画,不显示直接false responsive: false, // 设置图表为响应式，根据屏幕窗口变化而变化 maintainAspectRatio: false,// 保持图表原有比例 plugins: { legend: {}, tooltip: {}, title: {}, subtitle: {} }, scales:{} }, data: { labels: [], // 在柱状图和折线图中X轴内容 // datasets是图表中展示的数据集，在柱状图和折线图中表示y轴内容 datasets: [ { label: '', // 系列名称 data: [], // 在柱状图和折线图中y轴值,pie图中显示数据值 } ] } } 

• options配置详情:options->plugins->title(subtitle的配置和title一模一样)

title: { display: true, // 默认false align: 'start', // 默认是center,其它值有:start,end text: 'are you ok', // 文本 color: 'red', // 字体颜色 padding: 5, // 内边距，数字，或者写成{ bottom: number ; top: number } position: 'top', //默认top,其它值有： "left" | "top" | "bottom" | "right" fullSize: true, // 默认true, 此框应占用画布的全宽,如果是false, 方框放在图表区域的上方/旁边 font: { size: 50, // default:12 family: 'Helvetica Neue', // default:"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif" style: 'italic', // 默认normal, italic, oblique, initial, inherit weight: 'bold', // normal | bold | bolder | lighter lineHeight: 1.2 // default: 1.2 } } 

• options配置详情:options->plugins->tooltip

tooltip: { enabled: true, // 是否启用，默认true,false时不显示tooltip backgroundColor: 'rgba(0, 0, 0, 0.8)', // 背景颜色 titleColor: 'yellow', // 标题颜色 titleFont: {}, // 字体和options->plugins->title中完全一致 titleAlign: 'left', //标题对齐： 'left' (default),'right','center' titleMarginBottom: 6, // title底部的外间距 bodyColor: 'green', // 主体颜色 bodyFont: {}, // 字体和options->plugins->title中完全一致 bodyAlign: 'left', //主体对齐： 'left' (default),'right','center' borderColor: 'rgba(0, 0, 0, 0)', // 边框颜色 borderWidth: 2, // 边框宽度 padding: 10 // 内边距, pointStyle : 'triangle', // 点样式，文字前面的图标，usePointStyle为true时才生效,其它值有：'circle'(圆)、'cross'(十字)、'crossRot'(叉)、'dash'(短横杠),'line'(长横线),'rect'(矩形),'rectRounded'(圆角矩型),'rectRot'(菱形),'star'星星,'triangle'(三角形),false, usePointStyle: true, // 是否使用点样式，默认false } 

• options配置详情:options->plugins->legend图例组件

legend: { display: true, // true(default),false position: 'top', //'top'(default),'left','bottom','right','chartArea' align: 'center', //'center'(default),'start','center','end' // 图例标签 labels: { color:'purple', // 标签颜色 boxWidth: 100, // 盒宽度(文字前面的图标) boxHeight: 100, // 盒高度(文字前面的图标) font: {}, // 字体和options->plugins->title中完全一致 padding: 10, //默认10 textAlign: 'center', //对齐方式 'center'(default),'left', 'right' pointStyle : 'triangle', // 点样式，文字前面的图标，usePointStyle为true时才生效,其它值有：'circle'(圆)、'cross'(十字)、'crossRot'(叉)、'dash'(短横杠),'line'(长横线),'rect'(矩形),'rectRounded'(圆角矩型),'rectRot'(菱形),'star'星星,'triangle'(三角形),false, usePointStyle: true, // 是否使用点样式，默认false }, maxHeight: 100, // 最大高度 maxWidth: 100, // 最大宽度 onClick: () => {}, // 点击事件(echarts中无) onHover: () => {}, // 经过(echarts中无) onLeave: () => {}, // 离开(echarts中无) reverse: false, // false(default),true时和dataset顺序相反(echarts中无) // legend 标题(echarts中无) title: { color: 'red', // 标题颜色 display: false, // 默认false padding: 10, // title内边距 font: {}, // 字体和options->plugins->title中完全一致 text: 'legend title', // 文本 } } 

• options配置详情:options->animations动画

animation: false, // false禁止所有动画,默认true animation: { duration: 1000, // 毫秒，动画持续时间 easing:'linear', // 过渡效果 delay: 1000, // 毫秒，延时多久后显示动画 loop: false, // 如果true, 动画将一直循环播 onProgress: () => {console.log('ing')}, // 动画进行中事件 onComplete: () => {console.log('done')}, // 动画完成事件 } 

• options配置详情:options->scales 度量

scales: { // 柱状图/折线图：x轴配置 x: { display: true, // 默认true // x轴刻度相关内容 ticks: { display: true, // 默认true color:'red', // 颜色 font: {}, // 字体和options->plugins->title中完全一致 }, position: 'right', //定位：left(default),right // x轴title title: { display: true, // 默认false text: 'Value', // 文本 color: '#191', // 颜色 font: {}, // 字体和options->plugins->title中完全一致 padding: {top: 30, left: 0, right: 0, bottom: 0} }, // 网格线 grid: { display: true, // 是否显示，默认false color: 'red',// 线的颜色 lineWidth: 10 // 线宽度 } } // 柱状图/折线图：y轴配置 y: { display: true, // 是否显示,默认true beginAtZero: true, // 是否从0开始，默认true min: 0, // 最小值 max: 200, // 最大值 // y轴刻度相关内容 ticks: { display: true, // 默认true color:'red', // 颜色 font:{}, // 字体和options->plugins->title中完全一致 }, position: 'right', //定位：left(default),right // y轴title title: { display: true, // 默认false text: 'Value', // 文本 color: '#191', // 颜色 font: {}, //字体和options->plugins->title中完全一致 padding: {top: 30, left: 0, right: 0, bottom: 0} }, // 网格线 grid: { display: true, // 是否显示，默认true color: 'red',// 线的颜色 lineWidth: 10 // 线宽度 } }, } 

• dataset详情：柱状图

datasets: [{ label: 'two',// 系列名： data: [40, 60], // 数值 barThickness: 20, // 柱状的粗度 maxBarThickness: 30, // 柱状的最大粗度 backgroundColor: 'blue', // 背景颜色 hoverBackgroundColor: 'black', // 鼠标经过时背景颜色 borderWidth: 2, // 边框宽度 hoverBorderWidth: 10, // 鼠标经过时边框宽度 borderRadius: 10, // 边框圆角 hoverBorderRadius: 10, // 鼠标经过时边框圆角 borderColor: 'black', // 边框颜色 hoverBorderColor: 'black', // 鼠标经过时边框颜色 }] 

• dataset详情：折线图

datasets: [{ label: 'two', // 系列名 data: [32, 59, 13, 75, 27, 13], // 数值 showLine: true, // 是否显示线，默认true borderWidth: 2, // 边框宽度,即折线线的宽度 borderColor: "green", // 边框颜色 fill: true, // 是否填充，默认false,背景颜色即填充颜色 backgroundColor: 'yellow', // fill为true时生效, 背景颜色即填充颜色 pointStyle:'triangle', // 拐点样式，其它值有：'circle'(圆)、'cross'(十字)、'crossRot'(叉)、'dash'(短横杠),'line'(长横线),'rect'(矩形),'rectRounded'(圆角矩型),'rectRot'(菱形),'star'星星,'triangle'(三角形),false, pointBackgroundColor: 'orange', // 拐点背景颜色 pointBorderColor: '#666', // 拐点边框颜色 pointBorderWidth: 20, // 拐点边框宽度 pointRotation: 30, // 拐点旋转角度 pointRadius: 5 //拐点半径 }] 

• dataset详情：饼图

datasets: [{ label: 'one', // 系列名：大部分情况下没有 data: [12, 19, 3, 5, 2, 3], // 数值 backgroundColor: ["red", "Blue", "Yellow", "Green", "Purple", "Orange"], // 背景颜色 hoverBackgroundColor: 'black', // 鼠标经过时背景颜色 offset:100, // 偏移量 hoverOffset: 0, // 鼠标经过时偏移量 borderWidth: 2, // 边框宽度 borderColor: 'black', // 边框颜色 hoverBorderColor: 'black', // 鼠标经过时边框颜色 borderAlign:'center', // 边框对齐方式：'center'(default)|'inner' }] 

chartjs常用API

myChart.destroy(); // 销毁图表 myChart.update(); // 更新图片 myChart.stop(); // 停止动画 myChart.resize(width, height); // 重新设置大小 myChart.clear(); // 清除canvas