Chart.js размещает обе серии в одном масштабе

Question

Итак, у меня есть диаграмма chart.js с двумя сериями. Один представляет собой гистограмму, а другой - линейный график.

S1 = 71,166,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 "S. Просто установите оба одинаковых, вы также можете удалить неиспользованные yAxes объект из options

играть на скрипке