ChartJS 多次执行一个函数答案

【问题标题】：ChartJS executes a function multiple timesChartJS 多次执行一个函数
【发布时间】：2018-02-22 10:22:42
【问题描述】：

我正在使用 ChartJS 绘制折线图。问题是我试图在垂直轴上画一些小线来标记每 10% 的轴，如下所示：

extendChartLine: function() {
    window.Chart.plugins.register({
          beforeDraw: function(chart) {
            var ctx = chart.chart.ctx,
              chartArea = chart.chartArea,
              spacing = (chartArea.bottom - 40) /10;

            for(var i = 1; i < 10; i++) {
              ctx.restore();
              ctx.beginPath();
              ctx.moveTo(40, chartArea.bottom - i*spacing);
              ctx.strokeStyle = '#333';
              ctx.lineTo(47, chartArea.bottom - i*spacing);
              ctx.lineWidth = 0.2;
              ctx.stroke();
              ctx.closePath();
              ctx.save();
            }
          }
     });

问题是函数被多次调用，导致这些线条不止一次绘制并相互折叠（我知道这是因为有些线条比其他线条更暗）我尝试使用标志变量来使用这些代码仅执行 1 次，但图表上没有画线。

【问题讨论】：

为什么你不能尝试用多个数据集创建多折线图，就像这个 codepen 中提供的那样：codepen.io/k3no/pen/pbYGVa
您有一个执行多次的 for 循环。你为什么不把它换成别的东西呢？
那不是多折线图。我正在尝试在垂直轴上绘制小线，每个轴的 10% 设备

标签： javascript jquery canvas chart.js

【解决方案1】：

我也遇到了同样的情况，如果图表打开了动画选项，我认为这会导致重绘被多次调用

【讨论】：