跨多个图表的垂直线

Question

我正在尝试在具有相同标签的所有图表中应用一条垂直线。我找到并修改的解决方案仅在活动图表上运行良好 - 带有工具提示的行在那里正确显示。在其他图表上，线是应有的位置，但当移动到 x 轴上的其他位置时，它不会被移除并逐渐覆盖整个图表。

我通过为所有图表发送鼠标悬停事件以某种方式解决了这个问题，但它很滞后并且不符合我的期望。

我只想从不活动的图表中删除线阴影。

这是我的代码示例：

 var charts = [];

    $(document).ready(function () {

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

                if (this.chart.tooltip._active && this.chart.tooltip._active.length) {
                    charts.forEach(chart => {
                    var activePoint = this.chart.tooltip._active[0],
                        ctx = chart.ctx,
                        x = activePoint.tooltipPosition().x,
                        topY = this.chart.scales['y-axis-0'].top,
                        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 = '#07C';
                    ctx.stroke();
                    ctx.restore();
                  })
                }
            }
        });



        var ctx1 = document.getElementById('myChart1').getContext('2d');
        var chart1 = new Chart(ctx1, {
            type: 'LineWithLine',
            data: {
                labels: ['Segment 1', 'Segment 2', 'Segment 3','Segment 4','Segment 5','Segment 6','Segment 7','Segment 8','Segment 9','Segment 10','Segment 11','Segment 12'],
                datasets: [{
                    lineTension: 0,
                    backgroundColor: "rgb(34,139,34)",
                    borderColor: "rgb(34,139,34)",
                    data: [14, 19, 20, 10, 6, 15, 8, 27, 25, 14, 36, 22],
                    fill: false,
                    pointRadius: 1.5,
                    pointHoverRadius: 1,
                    borderWidth :1.5
                }],
                fill: false,
                pointRadius: 0,
                borderWidth: 1,
            },
            options: {
                maintainAspectRatio: false,
                hover: {
                    mode: 'index',
                    intersect: false,
                },
                title: {
                    display: true,
                    text: ''
                },
                legend: {
                    display: false
                },
                tooltips: {
                    mode: 'index',
                    //enabled: false,
                    intersect: false,
                },
            }
        });
        
        
        var ctx2 = document.getElementById('myChart2').getContext('2d');
        var chart = new Chart(ctx2, {
            type: 'LineWithLine',
            data: {
                labels: ['Segment 1', 'Segment 2', 'Segment 3','Segment 4','Segment 5','Segment 6','Segment 7','Segment 8','Segment 9','Segment 10','Segment 11','Segment 12'],
                datasets: [{
                    lineTension: 0,
                    backgroundColor: "rgb(34,139,34)",
                    borderColor: "rgb(34,139,34)",
                    data: [14, 11, 10, 20, 20, 15, 25, 15, 13, 14, 16, 8],
                    fill: false,
                    pointRadius: 1.5,
                    pointHoverRadius: 1,
                    borderWidth :1.5
                }],
            },
            options: {
                maintainAspectRatio: false,
                title: {
                    display: true,
                    text: ''
                },
                legend: {
                    display: false
                },
                tooltips: {
                    mode: 'index',
                    intersect: false,
                },
            }

        });

        charts.push(chart)
        charts.push(chart1)

    });

<h3 style="text-align: center">Hi ChartJs!</h3>
<div>
    <canvas style="width: 500px" height="200px" id="myChart1"></canvas>
</div>
<div>
    <canvas style="width: 500px" height="200px" id="myChart2"></canvas>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>

Answer 1

在您的draw() 函数中，您需要在另一个图表上调用draw()。为了避免图表上过时的工具提示失去焦点，您还必须确保其选项 tooltips.enabled 设置为 false。

charts.forEach(chart => {         
  chart.options.tooltips.enabled = this.chart == chart;
  if (this.chart != chart) {
    chart.draw();
  }

请在下面查看您修改后的代码。

var charts = [];

$(document).ready(function() {
  Chart.defaults.LineWithLine = Chart.defaults.line;
  Chart.controllers.LineWithLine = Chart.controllers.line.extend({
    draw: function(ease) {
      Chart.controllers.line.prototype.draw.call(this, ease);
      if (this.chart.tooltip._active && this.chart.tooltip._active.length) {
        charts.forEach(chart => {         
          chart.options.tooltips.enabled = this.chart == chart;
          if (this.chart != chart) {
            chart.draw();
          }
          var activePoint = this.chart.tooltip._active[0];
          var ctx = chart.ctx;
          var x = activePoint.tooltipPosition().x;
          var topY = this.chart.scales['y-axis-0'].top;
          var 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 = '#07C';
          ctx.stroke();
          ctx.restore();
        })
      }
    }
  });

  var ctx1 = document.getElementById('myChart1').getContext('2d');
  var chart1 = new Chart(ctx1, {
    type: 'LineWithLine',
    data: {
      labels: ['Segment 1', 'Segment 2', 'Segment 3', 'Segment 4', 'Segment 5', 'Segment 6', 'Segment 7', 'Segment 8', 'Segment 9', 'Segment 10', 'Segment 11', 'Segment 12'],
      datasets: [{
        lineTension: 0,
        backgroundColor: "rgb(34,139,34)",
        borderColor: "rgb(34,139,34)",
        data: [14, 19, 20, 10, 6, 15, 8, 27, 25, 14, 36, 22],
        fill: false,
        pointRadius: 1.5,
        pointHoverRadius: 1,
        borderWidth: 1.5
      }],
      fill: false,
      pointRadius: 0,
      borderWidth: 1,
    },
    options: {
      maintainAspectRatio: false,
      hover: {
        mode: 'index',
        intersect: false,
      },
      title: {
        display: true,
        text: ''
      },
      legend: {
        display: false
      },
      tooltips: {
        mode: 'index',
        //enabled: false,
        intersect: false,
      },
    }
  });

  var ctx2 = document.getElementById('myChart2').getContext('2d');
  var chart = new Chart(ctx2, {
    type: 'LineWithLine',
    data: {
      labels: ['Segment 1', 'Segment 2', 'Segment 3', 'Segment 4', 'Segment 5', 'Segment 6', 'Segment 7', 'Segment 8', 'Segment 9', 'Segment 10', 'Segment 11', 'Segment 12'],
      datasets: [{
        lineTension: 0,
        backgroundColor: "rgb(34,139,34)",
        borderColor: "rgb(34,139,34)",
        data: [14, 11, 10, 20, 20, 15, 25, 15, 13, 14, 16, 8],
        fill: false,
        pointRadius: 1.5,
        pointHoverRadius: 1,
        borderWidth: 1.5
      }],
    },
    options: {
      maintainAspectRatio: false,
      title: {
        display: true,
        text: ''
      },
      legend: {
        display: false
      },
      tooltips: {
        mode: 'index',
        intersect: false,
      },
    }

  });
  charts.push(chart)
  charts.push(chart1)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>

<div>
  <canvas style="width: 500px" height="200px" id="myChart1"></canvas>
</div>
<div>
  <canvas style="width: 500px" height="200px" id="myChart2"></canvas>
</div>