Как использовать две оси Y в Chart.js v2?

Question

Я пытаюсь создать линейный график с двумя наборами данных, каждый со своим собственным масштабом / осью Y (один слева, один справа от графика), используя Chart.js.

Это мой код ( jsfiddle):

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

Однако вторая ось не видна, а второй набор данных по-прежнему масштабируется точно так же, как и первая (от 0 до 100 вместо от 0 до 1). Что мне нужно изменить?

Answer 1

Для ChartJs 2.x необходимо внести только пару изменений (похоже, вы пытались объединить опции 2.x с вариантами многоосей из моего форка?),

• yAxes поле должно быть в scales объект
• на yAxis ссылается id, а не name.
• Для масштабирования шагов / размера вам просто нужно обернуть эти параметры в ticks объект.
• Нет необходимостиscalePositionLeft это покрыто position

Пример:

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
        }
      }]
    }
  }
});

пример скрипки

Answer 2

Принятый ответ больше не работает с версии 3.5, а причина указана как часть критических изменений для 3.X (см. Руководство по миграции 3.x )

Обновленный код ниже изменяет scales собственность, от scales: {yScales: [...]} к scales: {[id]: {[options]}} , а также добавляет fill: true, (В 3.X значение по умолчанию было изменено на true) и tension: 0.4 (В приведенном выше примере действительно плавные кривые, и похоже, что это недокументированное «критическое» изменение)

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

Answer 3

Это решение работает в 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 }} 
/>