Question

I recently upgraded my version of Chart.js from v2.3 to v2.7.1, which broke an existing functionality where the specified segment in a doughnut chart would be active (hover color, tooltip shown) when the user hovered over the corresponding legend item. That code looked like this:

 var " + ClientID + @" = new Chart(" + ClientID + @"CTX, {
    data: { ... },
    options: {
        legend: {
            onHover: function(evt, legendItem) {
                var index = " + ClientID + @".data.labels.indexOf(legendItem.text);
                if (" + ClientID + @".data.datasets[0].data[index] > 0) {
                    var metaData = " + ClientID + @".getDatasetMeta(0);
                    var activeSegment = metaData.data[index];
                    " + ClientID + @".tooltipActive = [activeSegment];
                    " + ClientID + @".active = [activeSegment];
                }                                   
            },
        }
    }
});

Looking through the Chart.js file and documentation, it looks like the tooltipActive property has been completely removed, thus breaking the legend hover functionality. I looked through the release notes and PRs on the Chart.js git but couldn't find where this was noted as a breaking change, or any mention of it whatsoever. I have to upgrade versions of Chart.js for a separate change I'm making, so reverting back to v2.3 is not an option. Has anyone else run into this?

Answer 1

这是基于您的方法的解决方案，可与当前版本的Chart.js（2.9.3）配合使用。

在onHover旁边，您还必须定义一个onLeave回调函数。这样可以确保在鼠标指针离开图例标签后立即隐藏工具提示并恢复悬停效果。

const chart = new Chart('chart', {
  type: 'doughnut',
  data: {
    labels: ['One', 'Two', 'Three'],
    datasets: [{
      data: [4, 5, 3],
      backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(255, 159, 64, 0.2)', 'rgba(54, 162, 235, 0.2)'],
      borderColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(54, 162, 235)'],
      hoverBackgroundColor: ['rgba(255, 99, 132, 0.4)', 'rgba(255, 159, 64, 0.4)', 'rgba(54, 162, 235, 0.4)'],
      borderWidth: 1,
      hoverBorderWidth: 3
    }]
  },
  options: {
    legend: {
      onHover: (evt, legendItem) => {
        const index = chart.data.labels.indexOf(legendItem.text);
        const activeSegment = chart.getDatasetMeta(0).data[index];
        activeSegment._model.backgroundColor = activeSegment._options.hoverBackgroundColor;
        activeSegment._model.borderWidth = activeSegment._options.hoverBorderWidth;
        chart.tooltip._active = [activeSegment];
        chart.tooltip.update();
        chart.draw();
      },
      onLeave: (evt, legendItem) => {
        const index = chart.data.labels.indexOf(legendItem.text);
        const activeSegment = chart.getDatasetMeta(0).data[index];
        activeSegment._model.backgroundColor = activeSegment._options.backgroundColor;
        activeSegment._model.borderWidth = activeSegment._options.borderWidth; 
        chart.tooltip._active = [];
        chart.tooltip.update();
        chart.draw();
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="chart" height="80"></canvas>

Answer 2

这是一个基于this anwser的timclutton的解决方案，可与当前版本的Chart.js（2.9.3）配合使用。

const chart = new Chart('chart', {
  type: 'doughnut',
  data: {
    labels: ['One', 'Two', 'Three'],
    datasets: [{
      data: [4, 5, 3],
      backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(255, 159, 64, 0.2)', 'rgba(54, 162, 235, 0.2)'],
      borderColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(54, 162, 235)'],
      hoverBackgroundColor: ['rgba(255, 99, 132, 0.4)', 'rgba(255, 159, 64, 0.4)', 'rgba(54, 162, 235, 0.4)'],
      borderWidth: 1,
      hoverBorderWidth: 3
    }]
  },
  options: {
    legend: {
      onHover: (evt, legendItem) => {
        const index = chart.data.labels.indexOf(legendItem.text);
        const rect = chart.canvas.getBoundingClientRect();
        const point = chart.getDatasetMeta(0).data[index].getCenterPoint();
        const e = new MouseEvent('mousemove', {
          clientX: rect.left + point.x,
          clientY: rect.top + point.y
        });
        chart.canvas.dispatchEvent(e);
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="chart" height="80"></canvas>

Chart.js - show tooltip when hovering on legend

2 个答案: