chartjs配置说明文档

介绍

• 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