ChartJS 如何显示/隐藏动画当图例点击图表js

cfh9epnr  于 2022-11-06  发布在  Chart.js
关注(0)|答案(2)|浏览(361)

我添加了动画来显示折线图js中的值点上的标签值数据。但是当我单击图例来隐藏一条线时,标签不会消失。老实说,我真的没有任何线索来修复它。
the chart now
the chart after hide some line with legend

  1. var ctxTotal = $("#grap_trajec_divisi");
  2. var chartOptions = {
  3. responsive: true,
  4. maintainAspectRatio: false,
  5. legend: {
  6. position: 'bottom',
  7. },
  8. tooltips: {
  9. enabled: true,
  10. mode: 'single',
  11. callbacks: {
  12. label: function (tooltipItems, data) {
  13. var dataM = tooltipItems.yLabel;
  14. formatM(dataM);
  15. var multistringText = [data_M];
  16. multistringText.push(tooltipItems.yLabel);
  17. multistringText.push(data.datasets[tooltipItems.datasetIndex].label);
  18. return multistringText;
  19. }
  20. }
  21. },
  22. scales: {
  23. xAxes: [{
  24. display: true,
  25. gridLines: {
  26. color: "#f3f3f3",
  27. drawTicks: true,
  28. },
  29. scaleLabel: {
  30. display: false,
  31. labelString: 'Month'
  32. }
  33. }],
  34. yAxes: [{
  35. display: true,
  36. gridLines: {
  37. color: "#f3f3f3",
  38. drawTicks: true,
  39. },
  40. scaleLabel: {
  41. display: false,
  42. labelString: 'Value'
  43. },
  44. ticks: {
  45. callback: function (value, index, values) {
  46. var dataYaxis = value;
  47. formatM(dataYaxis);
  48. return data_M;
  49. }
  50. },
  51. }]
  52. },
  53. animation: {
  54. duration: 1,
  55. onComplete: function () {
  56. var chartInstance = this.chart,
  57. ctx = chartInstance.ctx;
  58. ctx.font = '.7rem "Calibri",sans-serif';
  59. ctx.fillStyle = '#555';
  60. ctx.textAlign = "center";
  61. this.data.datasets.forEach(function (dataset, i) {
  62. var meta = chartInstance.controller.getDatasetMeta(i);
  63. meta.data.forEach(function (bar, index) {
  64. var data = dataset.data[index];
  65. formatM(data);
  66. ctx.fillText(data_M, bar._model.x, bar._model.y - 5);
  67. });
  68. });
  69. }
  70. }
  71. //title: {
  72. // display: true,
  73. // text: 'Chart.js Line Chart - proyeksi'
  74. //}
  75. };
  76. var chartData = {
  77. labels: arr,
  78. datasets: [{
  79. label: "RKAP",
  80. data: value_LT,
  81. fill: false,
  82. borderColor: "rgb(89,159,240)",
  83. pointBorderColor: "rgb(89,159,240)",
  84. pointBackgroundColor: "#FFFFFF",
  85. pointBorderWidth: 1,
  86. pointHoverBorderWidth: 1,
  87. pointRadius: 3,
  88. spanGaps: true,
  89. }, {
  90. label: "Target",
  91. data: value_LT2,
  92. fill: false,
  93. borderColor: "rgb(186,179,61)",
  94. pointBorderColor: "rgb(186,179,61)",
  95. pointBackgroundColor: "#FFFFFF",
  96. pointBorderWidth: 1,
  97. pointHoverBorderWidth: 1,
  98. pointRadius: 3,
  99. spanGaps: true,
  100. }, {
  101. label: "Actual",
  102. data: value_LO,
  103. fill: false,
  104. borderColor: "rgb(78,199,138)",
  105. pointBorderColor: "rgb(78,199,138)",
  106. pointBackgroundColor: "#FFFFFF",
  107. pointBorderWidth: 1,
  108. pointHoverBorderWidth: 1,
  109. pointRadius: 3,
  110. spanGaps: true,
  111. }, {
  112. label: "Proyeksi",
  113. data: value_LP,
  114. fill: false,
  115. borderColor: "rgb(241,151,89)",
  116. pointBorderColor: "rgb(241,151,89)",
  117. pointBackgroundColor: "#FFFFFF",
  118. pointBorderWidth: 1,
  119. pointHoverBorderWidth: 1,
  120. pointRadius: 3,
  121. spanGaps: true,
  122. }],
  123. };
  124. var config = {
  125. type: 'line',
  126. options: chartOptions,
  127. data: chartData
  128. };
  129. if (window.chartTrajecDivisi != undefined) {
  130. window.chartTrajecDivisi.destroy();
  131. }
  132. window.chartTrajecDivisi = new Chart(ctxTotal, config);

我想通过点击标签来隐藏线时隐藏标签,这样标签和线一起隐藏/显示。

4si2a6ki

4si2a6ki1#

我觉得这个有用。

  1. this.data.datasets.forEach(function (dataset, i) {
  2. var meta = chartInstance.controller.getDatasetMeta(i);
  3. if (!meta.hidden) {
  4. meta.data.forEach(function (bar, index) {
  5. var data = dataset.data[index];
  6. formatM(data);
  7. ctx.fillText(data_M, bar._model.x, bar._model.y - 5);
  8. });
  9. }
  10. });
7vhp5slm

7vhp5slm2#

我找到了这个问题的答案。只是删除动画,并使用插件数据标签图表js。

相关问题