chartjs自动显示工具提示

5t7ly7z5 于 2022-11-06 发布在 Chart.js

关注(0)|答案(2)|浏览(298)

我为天气创建图表。我想在创建图表时自动显示最后一个数据点的工具提示。当鼠标移动到另一个数据点时，工具提示应该移动到鼠标的新数据点，如果鼠标在新数据点之外，工具提示应该消失。
https://www.chartjs.org/docs/3.8.0/samples/advanced/programmatic-events.html已经很近了。谢谢！

function triggerTooltip(chart) {
const tooltip = chart.tooltip; 
if (tooltip.getActiveElements().length > 0) 
  { tooltip.setActiveElements([], {x: 0, y: 0}); } 
  else { 
   const chartArea = chart.chartArea; 
   tooltip.setActiveElements([
      {
        datasetIndex: 0,
        index: 0,
      }, {
        datasetIndex: 1,
        index: 0,
      }], 
     { x: (chartArea.left + chartArea.right) / 2, 
       y: (chartArea.top + chartArea.bottom) / 2, }); 
    } 
chart.update(); }

我确实期望索引控制条，为工具提示。但它没有什么区别，无论索引是设置。而且当我改变x，y它仍然在同一个地方（接近第三条）。enter image description here

chart.js

来源：https://stackoverflow.com/questions/72767458/chartjs-show-tooltip-automatically

2条答案

按热度按时间

xmakbtuz1#

这可以通过afterDatasetUpdate挂钩中的插件核心API来完成，如下所示：

afterDatasetUpdate: chart => {
  if (!chart.tooltip.getActiveElements().length) {
    chart.tooltip.setActiveElements([{
      datasetIndex: 0,
      index: chart.data.datasets[0].data.length - 1
    }]);
    chart.update();
  }
}

请看一下下面的可运行代码片段，看看它是如何工作的。
第一个

赞(0）回复(0）举报 2022-11-06

zy1mlcev2#

谢谢-这正是我要找的！
答案中的代码片段与最后一个数据点上的可见工具提示一起工作。
当我在我的浏览器中的test.html中尝试它时（我测试了firefox，edge，chrome），工具提示是不可见的。
我的test.html中的错误在哪里？

<!DOCTYPE html>
<html>
<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
  <canvas id="myChart" width="400" height="95"></canvas>
  <script type="text/javascript">
    new Chart('myChart', {
      type: 'line',
      plugins: [{
        afterDatasetUpdate: chart => {
          if (!chart.tooltip.getActiveElements().length) {
            chart.tooltip.setActiveElements([{
              datasetIndex: 0,
              index: chart.data.datasets[0].data.length - 1
            }]);
            chart.update();
          }
        }
      }],
      data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [{
          label: '# of Events',
          data: [65, 59, 80, 20, 81, 56, 55, 68],
          borderColor: '#a00'
        }]
      }
    });
  </script>
</body>
</html>

这就是我的考验：

https://www.zebrafell.de/test.html

展开查看全部

赞(0）回复(0）举报 2022-11-06

我来回答

chartjs自动显示工具提示

2条答案

相关问题

热门标签

最新问答