在 Chart.js 的线图里增加竖线

我经常使用 Chart.js 生成图表,无它,名字好记+免费+持续更新。现在主要基于 Vue 开发项目,所以经常使用 vue-chart.js。前阵子遇到一个需求:

  1. 把一组数据画成线图
  2. 用户可以任意点击时间
  3. 用数据生成饼图

那么就需要在线图中画一条竖线,标识出当前时间点。本以为这个需求不复杂,没想到不仅 Chart.js 不支持,包含这个功能的插件因为 Chart.js 升级的关系,暂时没法用。所以只好自己实现。

经过一番 Google,在别人的基础上(链接忘记了)改出了这个版本:

import {generateChart, mixins} from 'vue-chartjs';
import Chart from 'chart.js';
const {reactiveProp} = mixins;

Chart.defaults.LineWithLine = Chart.defaults.line;
Chart.controllers.LineWithLine = Chart.controllers.line.extend({
  draw(ease) {
    Chart.controllers.line.prototype.draw.call(this, ease);

    let x;
    if (this.chart.tooltip._active && this.chart.tooltip._active.length) {
      const [activePoint] = this.chart.tooltip._active;
      x = activePoint.tooltipPosition().x;
    } else {
      const index = this.chart.lastClickIndex;
      if (index === undefined || index === null) {
        return;
      }
      const meta = this.chart.getDatasetMeta(0);
      x = meta.data[index]._model.x;
    }
    const ctx = this.chart.ctx;
    const topY = this.chart.scales['y-axis-0'].top;
    const bottomY = this.chart.scales['y-axis-0'].bottom;

    // draw line
    ctx.save();
    ctx.beginPath();
    ctx.moveTo(x, topY);
    ctx.lineTo(x, bottomY);
    ctx.lineWidth = 2;
    ctx.strokeStyle = '#1C57A3';
    ctx.stroke();
    ctx.restore();
  }
});
const Line = generateChart('line-chart', 'LineWithLine');

export default {
  extends: Line,
  mixins: [reactiveProp],
  props: {
    chartData: {
      type: Object,
      default: null,
    },
    options: {
      type: Object,
      default: null,
    },
  },
  mounted() {
    this.renderChart(this.chartData, this.options);
  },
};

这个组件基于 vue-chart.js,用法也跟 vue-chart.js 一致。主要利用 draw 回调,在线图绘制完成后,找到特定的位置,画一条宽度为 2 的竖线。实际使用效果良好。

回头有空提个 PR 去。

作者: meathill

爱编程,爱旅游,爱吐槽。 今年的目标是完成并运营至少一个 Side Project。 《Electron + Vue 实战开发》龟速创作中……

欢迎吐槽,请勿装死

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据