Chartjs中每个数据点的工具提示

qij5mzcb  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(265)

这是我在每个数据点上放置不同工具提示的代码。我想在每个数据点上放置不同的月份,但是所有的月份都打印在一起。我该如何将它们分开呢?

  1. function trendsChart(labels1, datasets1, chartId) {
  2. var ctx =
  3. document.getElementById(chartId).getContext('2d');
  4. var MONTHS = ["January", "February", "March", "April", "May", "June"];
  5. console.log(datasets1)
  6. var data = {
  7. labels: labels1,
  8. datasets: datasets1,
  9. };
  10. // Tooltip
  11. const titleTooltip = (tooltipItems) => {
  12. let sum = 77;
  13. MONTHS.forEach(function(tooltipItem) {
  14. sum = tooltipItem;
  15. })
  16. return sum;
  17. }
  18. var randomScalingFactor = function() {
  19. return (Math.random() > 0.5 ? 1.0 : 1.0) * Math.round(Math.random() * 100);
  20. };
  21. var line1 = [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()];
  22. myChart = new Chart(ctx, {
  23. type: 'line',
  24. data: data,
  25. options: {
  26. maintainAspectRatio: false,
  27. responsive: true,
  28. scales: {
  29. x: {
  30. barPercentage: 1.6,
  31. gridLines: {
  32. drawBorder: false,
  33. color: 'rgba(225,78,202,0.1)',
  34. zeroLineColor: "transparent",
  35. },
  36. ticks: {
  37. padding: 0,
  38. fontColor: "#9a9a9a"
  39. },
  40. title: {
  41. display: true,
  42. text: 'Week Of'
  43. }
  44. },
  45. y: {
  46. barPercentage: 1.6,
  47. gridLines: {
  48. drawBorder: false,
  49. color: 'rgba(225,78,202,0.1)',
  50. zeroLineColor: "transparent",
  51. },
  52. ticks: {
  53. padding: 0,
  54. fontColor: "#9a9a9a"
  55. },
  56. stacked: false,
  57. title: {
  58. display: true,
  59. text: 'Count'
  60. }
  61. }
  62. },
  63. plugins: {
  64. tooltip: {
  65. //yAlign: 'bottom',
  66. callbacks: {
  67. title: titleTooltip,
  68. }
  69. }
  70. }
  71. }
  72. });
  73. return myChart;
  74. }

a1o7rhls

a1o7rhls1#

在粘贴代码的titleTooltip中,您用MONTHS中的最后一个条目替换sum。然而,图片中的工具提示建议,在真实的代码中,您用77MONTHS中的所有条目创建一个数组,然后可能返回'Sum: ' + sum,这将导致工具提示中显示的字符串。
为了在单独的一行中查看所有月份,您可以按如下所示更改代码,并将sum作为array返回:

  1. const titleTooltip = ctx => {
  2. let sum = ['Sum: 77'];
  3. MONTHS.forEach(month => {
  4. sum.push(month);
  5. });
  6. return sum;
  7. }

生成的工具提示仍然没有多大意义,但您会在不同的行上看到所有月份。因此,您需要扩展函数titleTooltip以获得所需的结果。
请看一下你修改过的代码,看看它是如何工作的。
第一个

相关问题