问可以始终在Chartjs 3.1中显示所有工具提示
EN

Stack Overflow用户

提问于 2021-04-26 20:05:30

回答 1查看 526关注 0票数 0

我想总是显示所有的工具提示(不仅仅是悬停)，这样当我以pdf格式下载它时，我可以看到工具提示数据。我使用的是chartjs 3.1。它是可定位的吗？

javascript

chart.js

回答 1

Stack Overflow用户

发布于 2021-04-26 21:53:00

如果你想要所有的数据点，你不能使用工具提示，你必须使用datalabels插件：https://v2_0_0-beta_1--chartjs-plugin-datalabels.netlify.app/samples/charts/line.html

如果您只想在下载时显示一个带有工具提示的数据点，您可以像这样编程地触发工具提示：

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderWidth: 1
      }
    ]
  },
  options: {}
}

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

document.getElementById("triggger").addEventListener("click", () => {
  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: 2,
    }, {
      datasetIndex: 1,
      index: 2,
    }]);
  }

  chart.update();
});

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <br>
  <button id="triggger">
      trigger hover
    </button>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.0/chart.js" integrity="sha512-opXrgVcTHsEVdBUZqTPlW9S8+99hNbaHmXtAdXXc61OUU6gOII5ku/PzZFqexHXc3hnK8IrJKHo+T7O4GRIJcw==" crossorigin="anonymous"></script>
</body>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/67266316

复制

相似问题

问可以始终在Chartjs 3.1中显示所有工具提示
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问可以始终在Chartjs 3.1中显示所有工具提示EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问可以始终在Chartjs 3.1中显示所有工具提示
EN