Chart.js条形图不显示多个项目的条形图

pgccezyw  于 2024-01-07  发布在  Chart.js
关注(0)|答案(1)|浏览(311)

我正在使用chart.js和asp.net mvc 5 c#来绘制图表。我现在面临一个问题,多个数据值不显示条形图,而只显示名称。因此,例如data:[results.AppsName]可以是“MoreTesting,Search,Test_email”,如果data:[results. AppsName]是“MoreTesting”,图表将正确显示。下面是我的部分代码。

  1. <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.bundle.min.js"></script>
  2. success: function (results) {
  3. if (results !== null) {
  4. var barChartData =
  5. {
  6. labels: [results.Apps],
  7. datasets: [{
  8. label: 'Apps Count',
  9. backgroundColor: [
  10. "#f990a7",
  11. "#aad2ed",
  12. "#9966FF",
  13. "#99e5e5",
  14. "#f7bd83"
  15. ],
  16. borderWidth: 2,
  17. data: [results.AppsName] //This portion can have multiple values like "MoreTesting,Search,Test_email" or a single value like "MoreTesting"
  18. }
  19. ]
  20. };
  21. var ctx1 = document.getElementById("barcanvas").getContext("2d");
  22. window.myBar = new Chart(ctx1, {
  23. type: 'bar',
  24. data: barChartData,
  25. options:
  26. {
  27. title:
  28. {
  29. display: true,
  30. text: "Apps Count"
  31. },
  32. responsive: true,
  33. maintainAspectRatio: true
  34. }
  35. });
  36. }
  37. }
  38. });

字符串

jmp7cifd

jmp7cifd1#

对于results.Appsresults.AppsName,不需要额外的括号([])。
与您当前的代码一样,它将所有标签分类为一个类别,而不是多个类别(bar)。

  1. var barChartData = {
  2. labels: results.Apps,
  3. datasets: [
  4. {
  5. label: 'Apps Count',
  6. backgroundColor: [
  7. '#f990a7',
  8. '#aad2ed',
  9. '#9966FF',
  10. '#99e5e5',
  11. '#f7bd83',
  12. ],
  13. borderWidth: 2,
  14. data: results.AppsName,
  15. },
  16. ],
  17. };

字符串
Demo @ StackBlitz

展开查看全部

相关问题