首页 > 解决方案 > 与chart.js中的条形图结合时如何将折线图的y轴放在右边?

问题描述

我有一个图表,我正在尝试使用 chart.js 绘制一个帕累托图。我正在结合条形图和折线图来实现这一点。这是我的示例图:

在此处输入图像描述

这是代码:

       this.chartData = {
            labels: labels,
            datasets: [
              {
                data: lineData,
                label: "Cumulative Total of Number of Reassignments",
                type: 'line',
                fill: false,
                datalabels: {
                  color: "#0f0f0f"
                },
              },
              {
                label: "Number of Reassignments",
                data: datasetsLabel,
                datalabels: {
                  color: "#0f0f0f"
                }
              },
            ]
          }

lineData 数组保存值 45.87、64.22 等。 datasetsLabel 数组保存值 250、100、90 等。

我尝试使用以下选项:

      this.options = {
            responsive: true,
            scales: {
              yAxes: [
                {
                  ticks: {
                    stepSize: 5,
                  },
                },
                {
                  display: true,
                  position: 'right',
                  ticks: {
                    max: 100,
                    min: 0,
                    stepSize: 10
                  }
                }
              ],
            },
          }

我想要实现的是将 45.87、62.22 等值放在图表的右侧。我怎样才能做到这一点?

标签: javascriptchart.js

解决方案


推荐阅读