Chart.js place both series on same scale

问题

So I have a chart.js chart with two series. One is a bar chart and the other is a line graph.

S1 = 71,166,2,6,8

S2 = 6,2,4,8,5

When I plot them, they both appear on their own scales which makes the bar and line graphs kinda pointless.

I need a way to plot both charts on the same scale.

Is there a way to do this within chart.js? If not, how would you do it?

thanks.

    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,

                      }
                  }]
              }
          }
      });


  });

回答1:

In your code you have specified your two datasets to use different yAxisId's. Just set them both to the same, you can also remove the unused yAxes object from the options

fiddle

来源：https://stackoverflow.com/questions/37108735/chart-js-place-both-series-on-same-scale