ChartJS: при нажатии на легенду график становится ужасным - PullRequest
Новая
       28

ChartJS: при нажатии на легенду график становится ужасным

0 голосов
/ 09 ноября 2018

Я использовал пример для добавления вертикальной линии на моем графике, отсюда я взял ссылку https://github.com/chartjs/Chart.js/issues/3803#issuecomment-365450035

Все работает нормально, пока я не попытаюсь переключить опцию легенды в моем линейном графике, и линейный график начинает выглядеть странно.

Перед тем, как щелкнуть диаграмму опций легенды, она выглядит следующим образом: enter image description here

и как только я переключаю опцию легенды красного цвета, она выглядит следующим образом: enter image description here

Вот мой код, единственное, что я изменил, это то, что я использовал пунктирную линию вместо обычной линии на холсте, 

plugins: [{
  beforeEvent: function(chart, e) {
    if ((e.type === 'mousemove')
      && (e.x >= e.chart.chartArea.left)
      && (e.x <= e.chart.chartArea.right)
    ) {
      chart.options.customLinePlugin.x = e.x;
    }
  },
  afterDraw: function(chart, easing) {
    let ctx = chart.chart.ctx;
    let chartArea = chart.chartArea;
    let mainCanvas = chart.canvas;
    let pluginObj = chart.options.customLinePlugin;
    let x = pluginObj.x;

    if (!isNaN(x)) {
      ctx.save();
      ctx.setLineDash([4, 3]);
      ctx.strokeStyle = chart.options.customLinePlugin.color;
      ctx.moveTo(chart.options.customLinePlugin.x, chartArea.bottom);
      ctx.lineTo(chart.options.customLinePlugin.x, chartArea.top);
      ctx.stroke();
      ctx.restore();
    }
  },
}]

Странно то, что когда я наводю курсор мыши на линейную диаграмму, она становится нормальной, но если я отхожу от мыши из области диаграммы, она снова начинает выглядеть странно.

Я застрял, может кто-нибудь предложить, пожалуйста?

...