ChartJS 显示图表Js中特定点的数据标签

zbq4xfa0  于 2023-01-26  发布在  Chart.js
关注(0)|答案(1)|浏览(232)

我正试图建立一个chart.js线和散点,我想有数据标签显示只是在散点,我已经尝试过用datalabels插件从图表js,但它显示了所有数据集的数据标签,包括线,我怎么能只显示特定的散点?这是代码看起来像什么:

  1. Chart.register(ChartDataLabels);
  2. fetch('https://raw.githubusercontent.com/ConeDigital/assets/main/data.json')
  3. .then(response => response.json())
  4. .then(data => {
  5. var ctx = document.getElementById('myChart2').getContext('2d'),
  6. chart = new Chart(ctx, {
  7. type: 'line',
  8. data: getChartData(data),
  9. options: {
  10. legend: {
  11. display: false
  12. },
  13. plugins: {
  14. datalabels: { // This code is used to display data values
  15. anchor: 'end',
  16. align: 'top',
  17. font: {
  18. weight: 'bold',
  19. size: 16
  20. }
  21. }
  22. },
  23. tooltips: {
  24. mode: 'index',
  25. intersect: false,
  26. callbacks: {
  27. label: function (tooltipItem, data) {
  28. return data.datasets[tooltipItem.datasetIndex].label + ': ' + tooltipItem.yLabel+"%";
  29. },
  30. labelColor: function (tooltipItem, chart) {
  31. let border = ''
  32. let background = ''
  33. let colors
  34. if ( tooltipItem.datasetIndex === 1 ) {
  35. colors = {
  36. borderColor: '#fff',
  37. backgroundColor: '#001F5B'
  38. }
  39. } else {
  40. colors = {
  41. borderColor: '#fff',
  42. backgroundColor: '#eb8484'
  43. }
  44. }
  45. return colors
  46. }
  47. }
  48. },
  49. responsive: true,
  50. scales: {
  51. xAxes: [{
  52. stacked: false,
  53. scaleLabel: {
  54. display: false,
  55. labelString: 'Datum'
  56. },
  57. ticks: {
  58. display: false
  59. },
  60. gridLines: {
  61. display: false,
  62. drawBorder: false,
  63. }
  64. }],
  65. yAxes: [{
  66. stacked: false,
  67. ticks: {
  68. display: false
  69. },
  70. gridLines: {
  71. display: false,
  72. drawBorder: false
  73. },
  74. scaleLabel: {
  75. display: false,
  76. labelString: 'Procent'
  77. }
  78. }]
  79. }
  80. }
  81. });
  82. })
  83. function getChartData(json) {
  84. var labels = [];
  85. var omx_dataset = {
  86. label: 'OMXS30',
  87. borderColor: '#eb8484',
  88. fill: false,
  89. pointRadius: 0,
  90. borderWidth: 1,
  91. data: []
  92. };
  93. var gadd_dataset = {
  94. label: "GADD SMP SEK",
  95. borderColor: '#001F5B',
  96. fill: false,
  97. pointRadius: 0,
  98. borderWidth: 1,
  99. data: []
  100. };
  101. var mark1_dataset = {
  102. label: 'Start',
  103. borderWidth: 2,
  104. borderColor: '#FF0000',
  105. fill: false,
  106. type: 'scatter',
  107. data: [{
  108. x: '2011-03-29',
  109. y: 0
  110. }],
  111. pointRadius: 12
  112. };
  113. var mark2_dataset = {
  114. label: '2016',
  115. borderWidth: 2,
  116. borderColor: '#FF0000',
  117. fill: false,
  118. type: 'scatter',
  119. data: [{
  120. x: '2015-12-31',
  121. y: 20
  122. }],
  123. pointRadius: 12
  124. };
  125. var mark3_dataset = {
  126. label: '2020',
  127. borderWidth: 2,
  128. borderColor: '#FF0000',
  129. fill: false,
  130. type: 'scatter',
  131. data: [{
  132. x: '2020-01-07',
  133. y: 59
  134. }],
  135. pointRadius: 12
  136. };
  137. var mark4_dataset = {
  138. label: '2022',
  139. borderWidth: 2,
  140. borderColor: '#FF0000',
  141. fill: false,
  142. type: 'scatter',
  143. data: [{
  144. x: '2022-01-03',
  145. y: 109
  146. }],
  147. pointRadius: 12
  148. };
  149. json.map((point,i) => {
  150. labels.push(point.Date)
  151. const gadd_num = (point['GADD SMP SEK']*100).toFixed(2)
  152. const omx_num = (point['OMXS30']*100).toFixed(2)
  153. gadd_dataset.data.push(gadd_num)
  154. omx_dataset.data.push(omx_num)
  155. //console.log(point.Date)
  156. //result1_dataset.data.push(point.date)
  157. })
  158. return {
  159. labels: labels,
  160. datasets: [omx_dataset, gadd_dataset, mark1_dataset, mark2_dataset, mark3_dataset, mark4_dataset]
  161. }
  162. }

现在它显示了所有数据集的所有数据标签,看起来很混乱,提前感谢

ijnw1ujt

ijnw1ujt1#

您可以将数据标签配置添加到线数据集,禁用插件,如下所示:

  1. var omx_dataset = {
  2. label: 'OMXS30',
  3. borderColor: '#eb8484',
  4. fill: false,
  5. pointRadius: 0,
  6. borderWidth: 1,
  7. data: []
  8. datalabels: {
  9. display: false
  10. }
  11. };
  12. var gadd_dataset = {
  13. label: "GADD SMP SEK",
  14. borderColor: '#001F5B',
  15. fill: false,
  16. pointRadius: 0,
  17. borderWidth: 1,
  18. data: [],
  19. datalabels: {
  20. display: false
  21. }
  22. };
展开查看全部

相关问题