Chartjs数据标签未显示正确值

vu8f3i0k  于 2023-11-18  发布在  Chart.js
关注(0)|答案(1)|浏览(197)

我想在每个条形图的顶部显示数据标签,我已经用Chartdatalabels插件做到了这一点。但它不是显示值,而是显示如下所示的对象,我只需要显示第二个图形的数据标签(红色突出显示)

我使用的代码如下所示。我已经注册了datalabels插件。

  1. var WeeklyData = @Html.Raw(System.Text.Json.JsonSerializer.Serialize(Model.UDTSLDDailyPVA.ToList()))
  2. console.log(WeeklyData);
  3. let weeklylabels = [...new Set(WeeklyData.map((x) => x.Day))];
  4. console.log(weeklylabels);
  5. let weeklydatasets = (WeeklyData.map((y) => y.TotalActual));
  6. console.log(weeklydatasets);
  7. var barChartDataWeekly = {
  8. labels: weeklylabels,
  9. datasets: [{
  10. data: WeeklyData,
  11. backgroundColor: [
  12. 'rgba(0, 154, 221, 1)'
  13. ]
  14. }],
  15. };
  16. var YieldData = @Html.Raw(System.Text.Json.JsonSerializer.Serialize(Model.UDTSLDMonthlyYield.ToList()))
  17. var AnnotationValue = YieldData[0].YieldTarget;
  18. console.log(AnnotationValue);
  19. let yieldlabels = [...new Set(YieldData.map((x) => x.Day))];
  20. var yieldDataMonthly = {
  21. labels: yieldlabels,
  22. datasets: [{
  23. data: YieldData,
  24. backgroundColor: [
  25. 'rgba(0, 154, 221, 1)'
  26. ]
  27. }],
  28. };
  29. Chart.register(ChartDataLabels);
  30. window.onload = function () {
  31. var ctxUPHHistory = document.getElementById('barChartUPHHistory').getContext("2d");
  32. window.myBar = new Chart(ctxUPHHistory, {
  33. type: 'bar',
  34. data: barChartDataWeekly,
  35. options: {
  36. responsive: true,
  37. maintainAspectRatio: false,
  38. parsing: {
  39. xAxisKey: 'Day',
  40. yAxisKey: 'TotalActual'
  41. },
  42. scales: {
  43. y: {
  44. ticks: {
  45. beginAtZero: true,
  46. stepSize:20
  47. //// Include a dollar sign in the ticks
  48. //callback: function (value, index, ticks) {
  49. // return value + '%';
  50. //}
  51. }
  52. }
  53. },
  54. plugins: {
  55. legend: {
  56. display: false
  57. }
  58. }
  59. }
  60. });
  61. var ctxYieldHistory = document.getElementById('barChartYieldHistory').getContext("2d");
  62. window.myBar = new Chart(ctxYieldHistory, {
  63. type: 'bar',
  64. data: yieldDataMonthly,
  65. options: {
  66. responsive: true,
  67. maintainAspectRatio: false,
  68. parsing: {
  69. xAxisKey: 'YM',
  70. yAxisKey: 'YieldActual'
  71. },
  72. scales: {
  73. y: {
  74. ticks: {
  75. beginAtZero: false,
  76. stepSize: 20,
  77. // Include a dollar sign in the ticks
  78. callback: function (value, index, ticks) {
  79. return value + '%';
  80. }
  81. }
  82. }
  83. },
  84. plugins: {
  85. legend: {
  86. display: false
  87. },
  88. datalabels: {
  89. anchor: 'end',
  90. align: 'end',
  91. labels: {
  92. value: {
  93. color: 'white'
  94. }
  95. },
  96. formatter: (val) => {
  97. return val + '%';
  98. }
  99. },
  100. annotation: {
  101. annotations: {
  102. line: {
  103. type: 'line',
  104. yMin: AnnotationValue,
  105. yMax: AnnotationValue,
  106. borderWidth: 2,
  107. borderColor: 'white'
  108. }
  109. }
  110. }
  111. }
  112. }
  113. });
  114. };

字符串
感谢你的帮助。

myzjeezk

myzjeezk1#

我已经在@Kikon的指导下解决了这个问题。请在下面找到答案:

  1. var ctxYieldHistory =
  2. document.getElementById('barChartYieldHistory').getContext("2d");
  3. window.myBar = new Chart(ctxYieldHistory, {
  4. type: 'bar',
  5. data: yieldDataMonthly,
  6. plugins: [ChartDataLabels],
  7. options: {
  8. responsive: true,
  9. maintainAspectRatio: false,
  10. parsing: {
  11. xAxisKey: 'YM',
  12. yAxisKey: 'YieldActual'
  13. },
  14. layout: {
  15. padding: {
  16. left: 0,
  17. right: 0,
  18. top: 40,
  19. bottom: 0
  20. }
  21. },
  22. scales: {
  23. y: {
  24. ticks: {
  25. beginAtZero: false,
  26. stepSize: 20,
  27. // Include a dollar sign in the ticks
  28. callback: function (value, index, ticks) {
  29. return value + '%';
  30. }
  31. }
  32. }
  33. },
  34. plugins: {
  35. legend: {
  36. display: false
  37. },
  38. datalabels: {
  39. anchor: 'end',
  40. align: 'end',
  41. labels: {
  42. value: {
  43. color: 'white'
  44. }
  45. },
  46. formatter: function (value, context) {
  47. console.log(value.YieldActual);
  48. return value.YieldActual + '%';
  49. }
  50. },
  51. annotation: {
  52. annotations: {
  53. line: {
  54. type: 'line',
  55. yMin: AnnotationValue,
  56. yMax: AnnotationValue,
  57. borderWidth: 2,
  58. borderColor: 'white',
  59. borderDash: [10, 5]
  60. }
  61. }
  62. }
  63. }
  64. }
  65. });

字符串

展开查看全部

相关问题