Chart.js将两个系列放在同一比例上

Question

所以我有一个包含两个系列的chart.js图表。一个是条形图，另一个是折线图。

S1=71166,2,6,8

S2=6,2,4,8,5

当我绘制它们时，它们都出现在自己的比例尺上，这使得条形图和折线图有点毫无意义。

我需要一种方法把两张图表绘制在同一比例上。

在chart.js中有办法做到这一点吗？如果没有，你会怎么做？

谢谢。

    var barChartData = {
    labels: dataLabels,
        datasets: [{
            type: 'bar',
              label: "Actual",
                data: dataActual,
                fill: false,
                backgroundColor: '#71B37C',
                borderColor: '#71B37C',
                hoverBackgroundColor: '#71B37C',
                hoverBorderColor: '#71B37C',
                yAxisID: 'y-axis-2'
        }, {
            label: "Maximum",
                type:'line',
                data: dataMaximum,
                fill: false,
                borderColor: '#EC932F',
                backgroundColor: '#EC932F',
                pointBorderColor: '#EC932F',
                pointBackgroundColor: '#EC932F',
                pointHoverBackgroundColor: '#EC932F',
                pointHoverBorderColor: '#EC932F',
                yAxisID: 'y-axis-1'
        } ]
    };
$(function () {
    if (theChart !== undefined) {
        theChart.destroy();
    } 
      var ctxActualVsMax = document.getElementById("myChart2").getContext("2d");
      theChart = new Chart(ctxActualVsMax, {
          type: 'bar',
          data: barChartData,
          options: {
              responsive: true,
              tooltips: {
                  mode: 'label'
              },
              elements: {
                  line: {
                      fill: false
                  }
              },
              scales: {
                  xAxes: [{
                      display: true,
                      gridLines: {
                          display: false
                      },
                      labels: {
                          show: true,
                      }
                  }],
                  yAxes: [{
                      type: "linear",
                      display: true,
                      position: "left",
                      id: "y-axis-1",
                      gridLines:{
                          display: false
                      },
                      labels: {
                          show:true,
                      }
                  }, {
                      type: "linear",
                      display: false,
                      position: "right",
                      id: "y-axis-2",
                      gridLines:{
                          display: false
                      },
                      labels: {
                          show:true,
                      }
                  }]
              }
          }
      });

  });

Answer 1

在代码中，您已指定两个数据集使用不同的yAxisId。只要将它们设置为相同，您还可以从options 中删除未使用的yAxes对象

小提琴