Chart.js提示 – 悬停时标签不显示

huangapple
go评论88阅读模式
英文:

Chart.js Tooltip - labels on hover does not appear

问题

我想在鼠标悬停在柱状图上时显示numberValue的值作为标签。我已经尝试了许多方法，但在柱状图上悬停时没有显示任何内容。以下是代码部分：

  1. getBarChart() {
  2.     this.http.get(API).subscribe({
  3.       next: (data) => {
  4.         this.totalAmount= data;
  5.         let splitted = this.totalAmount.toString().split(",");
  6.         let numberValue= splitted[0];
  7.         let totalAmountPerMonth = splitted[1];
  8.         let month = splitted[2];
  10.         this.barChart.data.labels = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
  12.         let dataValues = new Array(12).fill(null);
  13.         let monthIndex = parseInt(month) - 1;
  14.         dataValues[monthIndex] = totalAmountPerMonth;
  16.         this.barChart.data.datasets = [
  17.           {
  18.             label: "Total Amount",
  19.             data: dataValues,
  20.             backgroundColor: DARK_BLUE
  21.           }
  22.         ];
  23.         this.barChart.update();
  24.       },
  25.       error: (err) => {
  26.         console.log(err);
  27.       }
  28.     });
  30.     Chart.register(BarController);
  31.     Chart.register(CategoryScale);
  32.     Chart.register(LinearScale);
  33.     Chart.register(BarElement);
  35.     this.barChart = new Chart("barChart", {
  36.       type: 'bar',
  37.       data: {
  38.         labels: [],
  39.         datasets: []
  40.       },
  41.       options: {
  42.         aspectRatio: 2.5,
  43.         scales: {
  44.           x: {
  45.             title: {
  46.               display: true,
  47.               text: "Month"
  48.             }
  49.           },
  50.           y: {
  51.             title: {
  52.               display: true,
  53.               text: "Total Amount"
  54.             }
  55.           }
  56.         },
  57.         plugins: {
  58.           legend: {
  59.             display: false
  60.           },
  61.           tooltip: {
  62.             callbacks: {
  63.               label: (context) => {
  64.                 const value = context.dataset.data[context.dataIndex];
  65.                 const numberValue = value !== null ? value : 'N/A';
  66.                 return `Number: ${numberValue}`;
  67.               }
  68.             }
  69.           }
  70.         },
  71.       }
  72.     });
  73.   }

希望这可以帮助你在柱状图上显示numberValue的值作为标签。

英文:

I want to display the value of the numberValue as a label on hover on the bar chart. I have tried many ways of doing this, but nothing appears on hover on the bar. Here is the code:

  1. getBarChart() {
  2. this.http.get(API).subscribe({
  3. next: (data) => {
  4. this.totalAmount= data;
  5. let splitted = this.totalAmount.toString().split(",");
  6. let numberValue= splitted[0];
  7. let totalAmountPerMonth = splitted[1];
  8. let month = splitted[2];
  9. this.barChart.data.labels = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
  10. let dataValues = new Array(12).fill(null);
  11. let monthIndex = parseInt(month) - 1;
  12. dataValues[monthIndex] = totalAmountPerMonth;
  13. this.barChart.data.datasets = [
  14. {
  15. label: "Total Amount",
  16. data: dataValues,
  17. backgroundColor: DARK_BLUE
  18. }
  19. ];
  20. this.barChart.update();
  21. },
  22. error: (err) => {
  23. console.log(err);
  24. }
  25. });
  26. Chart.register(BarController);
  27. Chart.register(CategoryScale);
  28. Chart.register(LinearScale);
  29. Chart.register(BarElement);
  30. this.barChart = new Chart("barChart", {
  31. type: 'bar',
  32. data: {
  33. labels: [],
  34. datasets: []
  35. },
  36. options: {
  37. aspectRatio: 2.5,
  38. scales: {
  39. x: {
  40. title: {
  41. display: true,
  42. text: "Month"
  43. }
  44. },
  45. y: {
  46. title: {
  47. display: true,
  48. text: "Total Amount"
  49. }
  50. }
  51. },
  52. plugins: {
  53. legend: {
  54. display: false
  55. },
  56. tooltip: {
  57. callbacks: {
  58. label: (context) => {
  59. const value = context.dataset.data[context.dataIndex];
  60. const numberValue = value !== null ? value : 'N/A';
  61. return `Number: ${numberValue}`;
  62. }
  63. }
  64. }
  65. },
  66. }
  67. });
  68. }

答案1

得分: 1

你需要导入并注册 Tooltip 才能使其显示。

英文:

You need to import and register the Tooltip for it to appear

huangapple
  • 本文由 发表于 2023年5月28日 18:14:41
  • 转载请务必保留本文链接：https://go.coder-hub.com/76350981.html
  • angular
  • chart.js
  • typescript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定