如何将图表系列分成不同的页面 (Chart.js)

Question

我正在处理 ASP.NET 项目 (.NET Framework 4.0) 并使用 Chart.js（版本 3.5.0）从数据创建图表。在此图表中，x 轴是一年中的月份，y 轴是数据值。因为有 2 个具有不同价值单位的系列，所以我希望系列位于不同的窗格中，如下图所示：

在图片中，两个系列共享相同的 x 轴，但放置在不同的窗格中（每个窗格也有不同的 y 轴）。

根据我的尝试，我可以使图表在不同的一侧具有多个 y 轴，如下所示：

但是根据要求，图表不能互相重叠，像第一张图那样，所以我想知道是否可以将它分成不同的窗格。

这是我的code

var chart;

function DrawChart() {
  if (chart) chart.destroy();
  var labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
  var data = {
    datasets: [{
        label: 'Volume (Cubic Metre)',
        data: [2900, 2105, 1950, 2030, 2105, 1950, 1040, 1600, 2300, 3000, 2020, 1700, 2100, 2000, 2800],
        pointRadius: 0,
        pointStyle: 'line',
        borderColor: '#F37B2D',
        backgroundColor: '#F37B2D',
        yAxisID: 'y1'
      },
      {
        label: 'Price ($)',
        data: [350, 320, 380, 350, 315, 355, 190, 200, 240, 350, 270, 300, 250, 280, 320],
        pointRadius: 0,
        pointStyle: 'rect',
        borderColor: '#4473C5',
        backgroundColor: '#4473C5',
        fill: true,
        yAxisID: 'y'
      },
    ],
    labels: labels,
  };
  var config = {
    type: 'line',
    data: data,
    options: {
      maintainAspectRatio: false,
      scales: {
        x: {
          ticks: {
            minRotation: 90,
            maxRotation: 90
          }
        },
        y: {
          position: 'left',
          beginAtZero: true,
          title: {
            display: true,
            text: '$'
          }
        },
        y1: {
          position: 'right',
          beginAtZero: true,
          title: {
            display: true,
            text: 'Cubic Metre'
          },
          grid: {
            drawOnChartArea: false
          }
        }
      },
      plugins: {
        legend: {
          position: 'bottom',
          reverse: true,
          labels: {
            usePointStyle: true,
            padding: 25,
          }
        }
      }
    }
  };
  var ctx = document.getElementById('chart');
  chart = new Chart(ctx, config);
}

$(function() {
  DrawChart();
});

Answer 1

我接了y轴，用了'stack'，我关掉了左右位置

Example code

 options: {
  maintainAspectRatio: false,
  scales: {
    x: {
      ticks: {
        minRotation: 90,
        maxRotation: 90
      }
    },
    y: {
      stack: 'chart',   // add stack
      //position: 'left',
      beginAtZero: true,
      title: {
        display: true,
        text: '$'
      }
    },
    y1: {
      stack: 'chart', // add stack
      offset: true, // add offset
      //position: 'right',
      beginAtZero: true,
      title: {
        display: true,
        text: 'Cubic Metre'
      },
      grid: {
        drawOnChartArea: false
      }
    }
  },

如何将图表系列分成不同的页面 (Chart.js)

How to separete chart series into different pane (Chart.js)

javascript

chart.js