图表js显示悬停图例上的数据

Question

我有一个饼图，我想在悬停时获取饼图每个部分的 number/data。我在版本 2.9.x 中看到了这个实现，但在版本 3.x 中它不起作用。我也试过在这里这样做：

 var pieChartHome = new Chart(
    "myChart",
    {
  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: {
    responsive:false,
      plugins: {
      
        legend: {
        position:'right',
              onHover: (evt, legendItem,legend) => {
        const index = pieChartHome.data.labels.indexOf(legendItem.text);
        const rect = pieChartHome.canvas.getBoundingClientRect();
        
        const point = pieChartHome.getDatasetMeta(0).data[index].getCenterPoint();
        const e = new MouseEvent('mousemove', {
          clientX: rect.left + point.x,
          clientY: rect.top + point.y
        });
        pieChartHome.canvas.dispatchEvent(e);
      },
        }
        
      }
    },
  }
  );

  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <div>
    <canvas id="myChart"></canvas>

  </div>

但这显示了闪烁的数据，而不是像这样的东西： Chart.js - show tooltip when hovering on legend

Answer 1

您可以通过 chart.js public 方法本身设置工具提示：

var options = {
  type: 'doughnut',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]
    }]
  },
  options: {
    plugins: {
      legend: {
        position: 'left',
        onHover: (evt, item, legend) => {
          const chart = legend.chart;
          const tooltip = chart.tooltip;

          const chartArea = chart.chartArea;
          tooltip.setActiveElements([{
            datasetIndex: 0,
            index: item.index,
          }], {
            x: (chartArea.left + chartArea.right) / 2,
            y: (chartArea.top + chartArea.bottom) / 2,
          });


          chart.update();
        },
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.1/chart.js"></script>
</body>

图表js显示悬停图例上的数据

Chart js show data on hovering legend

javascript

charts

chart.js