javascript - 具有多个 y 轴和不同比例的 Chartjs

Question

如何使用 ChartJs 在 Y 轴上使用不同的刻度？

我有这个数据集:

[ 1450478,2645844,1840524,640057,1145844,1530500,1695844,1778654,1450478,1645844,1450478,1645844 ]

[ 3.14, 4.15, 3.09, 3.48, 4.05, 3.99, 4.39, 4.15, 4.10, 3.98, 3.54, 3.50 ]

https://jsfiddle.net/psycocandy/ad18Lc4u/18/

线条所代表的最小比例显然非常接近 0 的比例。如何在不按图例过滤的情况下使同一条线可见？

Answer 1

我发现了问题，更新了 fiddle :https://jsfiddle.net/psycocandy/fwncq25a/14/

要在数据集中使用 yAxes 设置相应的 ID，正确的方法是使用 yAxisID:

var chartData = [
                [1450478, 2645844, 1840524, 640057, 1145844, 1530500, 1695844, 1778654, 1450478, 1645844, 1450478, 1645844],
                [3.14, 4.15, 3.09, 3.48, 4.05, 3.99, 4.39, 4.15, 4.10, 3.98, 3.54, 3.50]
    ];

var dataSet = {
  labels: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho',
    'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'
  ],
  datasets: [{
                type: 'line',
                label: 'Preço Médio Mensal',
                yAxisID: 'y-axis-0',
                borderColor: '#17522f',
                fill: false,
                backgroundColor: '#17522f',
                borderWidth: 3,
                radius: 4,
                hoverBorderWidth: 4,
                rotate: 90,
                data: chartData[1],
                datalabels: {
                    display: true,
                    align: 'end',
                    anchor: 'end',
                    rotation: -90,
                    clamp: true,
                    clip: true,
                    color: '#17522f',
                    padding: 10,
                    formatter: function (value, context) {
                        return numeral(value).format('0,0.00');
                    },
                    font: {
                        weight: 'bold',
                    }
                }
            },{
                type: 'bar',
                label: 'Total Mensal',
                yAxisID: 'y-axis-1',
                backgroundColor: '#7579ef',
                borderColor: '#171951',
                borderWidth: 2,
                data: chartData[0],
                datalabels: {
                    display: true,
                    clamp: true,
                    anchor: 'start',
                    align: 'end',
                    offset: 10,
                    rotation: -90,
                    color: '#171951',
                    formatter: function (value, context) {
                        return numeral(value).format('0,0');
                    },
                    font: {
                        weight: 'bold',
                    }
                }
            }]
};

var chart = new Chart(document.getElementById('myChart'), {
  type: 'bar',
  data: dataSet,
  options: {
    title: {
      display: false
    },
    tooltips: {
      mode: 'label',
      callbacks: {
        label: function(tooltipItem, data) {
          var value = parseFloat(tooltipItem.value);
          var formatedValue;
          if(tooltipItem.datasetIndex > 0){
            formatedValue = numeral(value).format('$ 0,0.00');
          }else{
            formatedValue = numeral(value).format('$ 0,0.00');
          }
          return ' ' + formatedValue;
        },
      }
    },
    responsive: true,
    scales: {
      xAxes: [{
        stacked: true
      }],
      yAxes: [{
        stacked: true,
        position: 'left',
        type: 'linear',
        scaleLabel: {
          display: true,
        },
        id: 'y-axis-1',
        ticks: {
          beginAtZero:true,
          callback: function (tick, index, ticks) {
            return numeral(tick).format('(0,0)');
          },
        }
      }, {
        stacked: false,
        position: 'right',
        type: 'linear',
        id: 'y-axis-0',
        ticks: {
          max: 10,
          stepSize: 1,
          display: true,
          beginAtZero: true,
          fontSize: 13,
          padding: 10,
          callback: function (tick, index, ticks) {
            return numeral(tick).format('$ 0,0');
          }
        }
      }]
    }
  }
});