ChartJS 使用Chart JS的多个Y轴,数据作为字典

yc0p9oo0  于 2022-11-07  发布在  Chart.js
关注(0)|答案(1)|浏览(243)

我正在使用Flask和Chart JS库来进行图形可视化。但是,我需要能够使用多个y轴(目前有2个),而且我找不到一种方法来使事情工作。我已经用列表的数据做过了,但是现在我使用类似于字典的数据,它似乎不再适合了。
下面是我的代码:

  1. <script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0/dist/chart.min.js"></script>
  2. <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js" integrity="sha512-UXumZrZNiOwnTcZSHLOfcTs0aos2MzBWHXOHOuB0J/R44QB0dwY5JgfbvljXcklVf65Gc4El6RjZ+lnwd2az2g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  3. <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/1.2.1/chartjs-plugin-zoom.min.js" integrity="sha512-klQv6lz2YR+MecyFYMFRuU2eAl8IPRo6zHnsc9n142TJuJHS8CG0ix4Oq9na9ceeg1u5EkBfZsFcV3U7J51iew==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  4. <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0/chartjs-plugin-datalabels.min.js" integrity="sha512-R/QOHLpV1Ggq22vfDAWYOaMd5RopHrJNMxi8/lJu8Oihwi4Ho4BRFeiMiCefn9rasajKjnx9/fTQ/xkWnkDACg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  5. <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@2.0.0/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
  6. <div class="chart-container">
  7. <canvas id="myChart_0">
  8. <p> Fallback of a Graph </p>
  9. </canvas>
  10. </div>
  11. <script>
  12. const dataset_0 = [{
  13. data: [{x:new Date('2022-10-21T00:00:00'),y:1.0},{x:new Date('2022-12-16T00:00:00'),y:2.0},{x:new Date('2023-01-20T00:00:00'),y:2.0}],
  14. barThickness: 3.0 ,
  15. backgroundColor: "blue" ,
  16. pointRadius: 0.0 ,
  17. type: "line" ,
  18. yAxisID:'y',
  19. borderColor: "blue" ,
  20. label: "Graphs" ,
  21. borderWidth: 0.0 ,
  22. datalabels: {color: '#FFCE56'},
  23. },
  24. {
  25. data: [{x:new Date('2022-10-21T00:00:00'),z:17.6},{x:new Date('2022-12-16T00:00:00'),z:16.9},{x:new Date('2023-01-20T00:00:00'),z:15.8}],
  26. barThickness: 0.0 ,
  27. backgroundColor: "red" ,
  28. pointRadius: 0.0 ,
  29. type: "bar" ,
  30. borderColor: "red" ,
  31. yAxisID:'z',
  32. label: "Graph" ,
  33. borderWidth: 1.0 ,
  34. },
  35. ];
  36. const data_0 = {
  37. datasets : dataset_0
  38. };
  39. const config_0 = {
  40. data: data_0,
  41. options: {
  42. animations:false,
  43. responsive: true,
  44. interaction: {
  45. },
  46. stacked: false,
  47. plugins: {
  48. title: {display: true, text: "None"},
  49. legend: { labels: { filter: function(item, chart) { return item.text; }, boxHeight : 4, boxWidth: 20}, display: true },
  50. },
  51. scales: {
  52. y: {
  53. type: 'linear',
  54. display: true,
  55. position: 'left',
  56. borderWidth : 0.001,
  57. offset: true,
  58. grid :{
  59. display:true
  60. },
  61. },
  62. z: {
  63. type: 'linear',
  64. display: true,
  65. position: 'right',
  66. borderWidth : 0.001,
  67. offset: true,
  68. grid :{
  69. display:true
  70. },
  71. },
  72. x1: {
  73. type: "time",
  74. display: true,
  75. offset: true,
  76. grid :{
  77. display:false
  78. },
  79. },
  80. },
  81. },
  82. };
  83. const myChart_0 = new Chart(document.getElementById('myChart_0'), config_0);
  84. </script>

我希望得到一个图表的比例在右边,另一个在左边,这样他们就可以得到自己的比例,因为现在的数据只是在相同的比例,它渲染不好(与目前的设置,我甚至不能看到折线图了)。
我想知道这个困难是否来自于这样一个事实,即类似于字典的输入使你同时给予标签和数据。
如果有人知道如何处理这个问题,请告诉我!

sd2nnvve

sd2nnvve1#

在第二个数据集的对象中,使用x和z键定义对象。Chart.js默认查找x和y键。如果要更改此设置,使chart.js查找不同的键,则需要在数据集中进行如下配置:

  1. {
  2. data: [{x:new Date('2022-10-21T00:00:00'),z:17.6},{x:new Date('2022-12-16T00:00:00'),z:16.9},{x:new Date('2023-01-20T00:00:00'),z:15.8}],
  3. parsing: {
  4. yAxisKey: 'z'
  5. }
  6. }

或者,您可以将密钥更改为y,这样也可以解决您的问题

相关问题