charts.js 堆叠 y 轴

问题描述

我正在寻找一种使用 charts.js 的解决方案，使其具有 4 个堆叠的 y 轴，但只有一个 x 轴，就像我可以在 R 中使用绘图创建的那样。我找到了有关几个 y 轴的所有信息，但是没有堆叠。预先感谢您的帮助。

解决方法

只能使用当前的主代码，在chart.js的下一个版本发布后，使用普通CDN就可以了

当前主分支代码示例：

var options = {
  type: 'line',data: {
    labels: ["Red","Blue","Yellow","Green","Purple","Orange,Black"],datasets: [{
        label: 'Dataset 1',data: [10,30,50,20,25,44,-10],borderColor: 'red',backgroundColor: 'red'
      },{
        label: 'Dataset 2',data: ['ON','ON','OFF','ON'],borderColor: 'blue',backgroundColor: 'blue',stepped: true,yAxisID: 'y2',}
    ]
  },options: {
    scales: {
      y: {
        type: 'linear',position: 'left',stack: 'demo',stackWeight: 2,grid: {
          borderColor: 'red'
        }
      },y2: {
        type: 'category',labels: ['ON','OFF'],offset: true,stackWeight: 1,grid: {
          borderColor: 'blue'
        }
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx,options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://www.chartjs.org/dist/master/chart.js"></script>
</body>

stacked

charts.js 堆叠 y 轴

问题描述

解决方法

相关问答