Question

我在angular-chart.js中使用了一组数据，但我希望两个y轴都使用相同的数据集（对于标签，我不想绘制图表相同的数据两次）。如果我只复制两个y轴的代码，则左轴显示正确的数据，而右轴显示从最小-1到最大1的刻度。

＆＃13;

...
scales: {
    yAxes: [{
        id: 'y-axis-1',
        type: 'linear',
        display: true,
        position: 'left',
        ticks: {
          beginAtZero: false,
          callback: function(value, index, values) {
            if (parseInt(value) >= 1000) {
              return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
            } else {
              return '$' + value;
            }
          }
        }
      },
      {
        id: 'y-axis-2',
        type: 'linear',
        display: true,
        position: 'right',
        ticks: {
          beginAtZero: false,
          callback: function(value, index, values) {
            if (parseInt(value) >= 1000) {
              return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
            } else {
              return '$' + value;
            }
          }
        }
      }
    ], ...

＆＃13;

如何在两个y轴上显示相同的标签？

Answer 1

您可以使用以下图表插件在两个不同的y轴上显示/使用相同的标签/刻度：

Chart.plugins.register({
   beforeInit: function(chart) {
      chart.options.scales.yAxes[1].ticks.suggestedMin = Math.min.apply(this, chart.data.datasets[0].data);
      chart.options.scales.yAxes[1].ticks.suggestedMax = Math.max.apply(this, chart.data.datasets[0].data);
   }
});

^{- 在脚本开头添加}

<强> ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ

＆＃13;

Chart.plugins.register({
   beforeInit: function(chart) {
      chart.options.scales.yAxes[1].ticks.suggestedMin = Math.min.apply(this, chart.data.datasets[0].data);
      chart.options.scales.yAxes[1].ticks.suggestedMax = Math.max.apply(this, chart.data.datasets[0].data);
   }
});

var chart = new Chart(ctx, {
   type: 'line',
   data: {
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
      datasets: [{
         label: 'LINE',
         data: [3, 1, 4, 2, 5],
         backgroundColor: 'rgba(0, 119, 290, 0.2)',
         borderColor: 'rgba(0, 119, 290, 0.6)',
         fill: false
      }]
   },
   options: {
      scales: {
         yAxes: [{
            id: 'y-axis-0',
            position: 'left',
            ticks: {
               stepSize: 1
            }
         }, {
            id: 'y-axis-1',
            position: 'right',
            ticks: {
               stepSize: 1
            }
         }]
      }
   }
});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="ctx"></canvas>

＆＃13;

如何在Chart.js中的两个y轴上使用相同的数据/标签

1 个答案: