Chart.js несколько серий с одинаковым масштабом

Question

У меня есть столбчатая диаграмма с накоплением и комбинированная диаграмма с неструктурированной линейной диаграммой с использованием Chart.js Мне нужно, чтобы сгруппированные столбцы и не сложенные линии появлялись на одной оси. Похоже, что я не могу это сделать, поэтому я расположил их по разным осям, чтобы одна могла быть сложена, а другая нет (например, наложена линия мощности на производство разных деталей). Однако, если они должны быть на разных осях, тогда мне нужно, чтобы они имели одинаковый масштаб. Я не мог найти способ заставить оси иметь одинаковый масштаб автоматически, поэтому я вынужден попытаться вычислить свой собственный масштаб и установить их для каждого из них. Это не идеально, и я бы предпочел, чтобы я просто использовал настройку, чтобы заставить их использовать тот же масштаб. Это возможно?

Вот пост, который, по сути, является тем же вопросом, что и я: Chart.js размещает обе серии в одном масштабе. Единственное отличие состоит в том, что мне нужно составлять ряды стержней, что не позволяет использовать одни и те же оси.

Answer 1

Возможно, я неправильно понимаю, что вы пытаетесь сделать, но можно создать столбчатую диаграмму с накоплением с комбинированной диаграммой с неразложенными линиями на одной оси.

Вот пример конфигурации, показывающий, как это сделать.

var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
      type: 'line',
      label: 'Dataset 1',
      borderColor: window.chartColors.blue,
      borderWidth: 2,
      fill: false,
      data: [5, 3, 4, 10, 8, 9, 2]
    }, {
      type: 'bar',
      label: 'Dataset 2',
      backgroundColor: window.chartColors.red,
      stack: 'Stack 0',
      data: [2, 4, 1, 3, 7, 3, 6],
      borderColor: 'white',
      borderWidth: 2
    }, {
      type: 'bar',
      label: 'Dataset 3',
      backgroundColor: window.chartColors.green,
      stack: 'Stack 0',
      data: [7, 2, 4, 5, 6, 4, 2]
    }]
  },
  options: {
    responsive: true,
    title: {
      display: true,
      text: 'Chart.js Stacked Bar and Unstacked Line Combo Chart'
    },
    tooltips: {
      mode: 'index',
      intersect: true
    },
    scales: {
      xAxes: [{
        stacked: true,
      }]
    }
  }
});

Вот и рабочий пример codepen.