如何创建一个组合的堆叠和分组条形图与chartjs?

o3imoua4  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(225)

我想创建一个如下所示的条形图:

我试着用网站上给出的文档创建一个堆叠条形图。https://www.chartjs.org/docs/latest/samples/bar/stacked.html
但是无法找到按照我要求创建图表的方法。
我试过下面的例子

  1. <canvas id="myChart" style="vertical-align:left;z-index:1; height: 350px"> </canvas>
  2. <script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
  3. <script>
  4. var ctx = document.getElementById("myChart").getContext("2d");
  5. var myBarChart = new Chart(ctx, {
  6. type: 'bar',
  7. data: {
  8. labels: ['T1', 'T2', 'T3', 'T4'],
  9. datasets: [{
  10. label: 'Done',
  11. backgroundColor: "#caf270",
  12. data: [12, 59, 5, 56],
  13. }, {
  14. label: 'Running',
  15. backgroundColor: "#45c490",
  16. data: [12, 59, 5, 56],
  17. }, {
  18. label: 'Todo',
  19. backgroundColor: "#008d93",
  20. data: [12, 59, 5, 56],
  21. }, {
  22. label: 'KO',
  23. backgroundColor: "#2e5468",
  24. data: [12, 59, 5, 56],
  25. }],
  26. },
  27. options: {
  28. tooltips: {
  29. displayColors: true,
  30. callbacks:{
  31. mode: 'x',
  32. },
  33. },
  34. scales: {
  35. xAxes: [{
  36. stacked: true,
  37. gridLines: {
  38. display: false,
  39. }
  40. }],
  41. yAxes: [{
  42. stacked: true,
  43. ticks: {
  44. beginAtZero: true,
  45. },
  46. type: 'linear',
  47. }]
  48. },
  49. responsive: true,
  50. maintainAspectRatio: false,
  51. legend: { position: 'top' },
  52. }
  53. });
  54. </script>
iih3973s

iih3973s1#

我认为你可以使用(stacked100插件)https://github.com/y-takey/chartjs-plugin-stacked100,以便堆栈按比例计算100%的缩放尺寸

相关问题