Javascript 如何在Chart.js v2中使用两个Y轴？

我正在尝试使用chart.js创建一个包含两个数据集的折线图，每个数据集都有自己的Y比例/轴（一个在图的左侧，一个在图的右侧）

这是我的代码（）：

---

但是，第二个轴不可见，并且第二个数据集仍与第一个数据集完全相同（0到100，而不是0到1）。我需要更改什么？

对于ChartJs 2.x，只需要进行几项更改（看起来您已经尝试将2.x选项与我的fork中的多轴选项结合起来了？）

• yAxes

  字段需要位于

  scales

  对象中
• yAxis由id而不是名称引用
• 对于缩放步长/大小，只需将这些选项包装在

  ticks

  对象中
• 不需要

  scalePositionLeft

  这在

  位置

例如：

var canvas = document.getElementById('chart');
new Chart(canvas, {
  type: 'line',
  data: {
    labels: ['1', '2', '3', '4', '5'],
    datasets: [{
      label: 'A',
      yAxisID: 'A',
      data: [100, 96, 84, 76, 69]
    }, {
      label: 'B',
      yAxisID: 'B',
      data: [1, 1, 1, 1, 0]
    }]
  },
  options: {
    scales: {
      yAxes: [{
        id: 'A',
        type: 'linear',
        position: 'left',
      }, {
        id: 'B',
        type: 'linear',
        position: 'right',
        ticks: {
          max: 1,
          min: 0
        }
      }]
    }
  }
});

---

此溶液在react中起作用

// "chart.js": "^2.9.4"
// "react-chartjs-2": "^2.11.1"


const lineChartData = {
  data: {
    labels: ['1', '2', '3', '4', '5', '6'],
    datasets: [
      {
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        fill: false,
        backgroundColor: 'rgb(255, 99, 132)',
        borderColor: 'rgba(255, 99, 132, 0.2)',
      },
      {
        label: '# of Votes',
        data: [19, 9, 2, 1, 1, 21],
        fill: false,
        backgroundColor: 'rgb(122, 99, 255)',
        borderColor: 'rgba(102, 99, 255, 0.2)',
      }
    ],
  },
  options: {
    scales: {
      yAxes: [
        {
          type: 'linear',
          display: true,
          position: 'left',
          ticks: {
            beginAtZero: true,
          },
        },
        {
          type: 'linear',
          display: true,
          position: 'left',
          ticks: {
            beginAtZero: true,
          },
        },
      ],
    },
  }
}


<Line 
   data={lineChartData.data} 
   options={lineChartData.options} 
   height={30} 
   width={80} 
   options={{ maintainAspectRatio: true }} 
/>

/“chart.js”：“^2.9.4”
//“react-chartjs-2”：“^2.11.1”
常量lineChartData={
数据：{
标签：['1'，'2'，'3'，'4'，'5'，'6']，
数据集：[
{
标签：“#投票数”，
数据：[12,19,3,5,2,3]，
填充：假，
背景颜色：“rgb（255，99，132）”，
边框颜色：“rgba（255,99,132,0.2）”，
},
{
标签：“#投票数”，
数据：[19,9,2,1,1,21]，
填充：假，
背景颜色：“rgb（122,99,255）”，
边框颜色：“rgba（102,99,255,0.2）”，
}
],
},
选项：{
比例：{
雅克斯：[
{
类型：'线性'，
显示：对，
位置：'左'，
滴答声：{
贝吉纳泽罗：是的，
},
},
{
类型：'线性'，
显示：对，
位置：'左'，
滴答声：{
贝吉纳泽罗：是的，
},
},
],
},
}
}

当我打开你的小提琴时，两个轴都在那里，但是第二个数据集（

B

）仍然没有缩放到右轴（

B

），为什么不呢？很抱歉，我的打字错误应该是

yAxisID

不是

yAxesID

@Quince Hi Quince，但是如何用你的代码应用两种不同类型的图表（直线和条形）。谢谢你advance@Bcktr我相信你可以把类型改成酒吧。（或者你是在同一个图形中显示一条线和一条线吗？）目前不在计算机附近，但我觉得应该可以。你知道如何根据数据自动设置刻度（最小/最大）？它适用于左轴，默认情况下，右轴为0-1

// "chart.js": "^2.9.4"
// "react-chartjs-2": "^2.11.1"


const lineChartData = {
  data: {
    labels: ['1', '2', '3', '4', '5', '6'],
    datasets: [
      {
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        fill: false,
        backgroundColor: 'rgb(255, 99, 132)',
        borderColor: 'rgba(255, 99, 132, 0.2)',
      },
      {
        label: '# of Votes',
        data: [19, 9, 2, 1, 1, 21],
        fill: false,
        backgroundColor: 'rgb(122, 99, 255)',
        borderColor: 'rgba(102, 99, 255, 0.2)',
      }
    ],
  },
  options: {
    scales: {
      yAxes: [
        {
          type: 'linear',
          display: true,
          position: 'left',
          ticks: {
            beginAtZero: true,
          },
        },
        {
          type: 'linear',
          display: true,
          position: 'left',
          ticks: {
            beginAtZero: true,
          },
        },
      ],
    },
  }
}


<Line 
   data={lineChartData.data} 
   options={lineChartData.options} 
   height={30} 
   width={80} 
   options={{ maintainAspectRatio: true }} 
/>