如何创建多个 y 轴时间序列图表

Question

我正在尝试映射多个图表，其中 x 轴 (time) 是固定的，但 y 轴可以采用多个值，例如 CPU%、RAM、IO-RATE 等。如果我尝试构建单独的图表，事情似乎很容易，但我有一个奇怪的要求，我需要将所有内容映射到同一个图表上。我一直在尝试使用 chartjs 库，我可以看到 Cartesian axes 能够处理多个轴。但是我在Cartesian 周围找到的示例大多具有带有一些固定标签值的 x 轴。就我而言，是时候了，我想知道如何为 时间序列 做同样的事情。我还为multiple time series 找到了这个example，但这似乎并没有创建多个y 轴。需要的是 this 之类的东西，但我很难弄清楚如何实现这一点。

我正在使用django 作为后端，我愿意尝试任何可以做到这一点并且可以轻松与django 集成的库。目前我一直在用chartjs探索事物。

Answer 1

首先您需要定义一个唯一的xAxis 并将其定义为time cartesian axis。

xAxes: [{
  type: 'time',
  time: {
    unit: 'minute',
    tooltipFormat: 'HH:mm:ss'
  }
}],

然后为每个dataset 定义一个linear cartesian yAxis 并确保yAxis.id 的值与对应的dataset.yAxisID 匹配。使用 'yAxis.position' 来定义坐标轴是出现在图表的left 还是right。

您还可以选择定义以下 Plugin Core API beforeLayout 函数，以确保当通过鼠标单击图例标签隐藏数据集时，yAxis 也被隐藏。

plugins: [{
    beforeLayout: chart => chart.data.datasets.forEach((ds, i) => chart.config.options.scales.yAxes[i].display = !ds._meta[0].hidden)
  }],

请看下面的可运行代码 sn-p，它说明了它是如何完成的。

const now = new Date().getTime();
const timestamps = new Array(10).fill().map((v, i) => now - i * 60000).reverse();

new Chart('chart', {
  type: 'line',
  plugins: [{
    beforeLayout: chart => chart.data.datasets.forEach((ds, i) => chart.config.options.scales.yAxes[i].display = !ds._meta[0].hidden)
  }],
  data: {
    labels: timestamps,
    datasets: [{
        label: 'CPU',
        yAxisID: 'yAxis-CPU',
        data: [68, 70, 71, 72, 75, 75, 76, 77, 79, 76],
        borderColor: 'red',
        fill: false
      },
      {
        label: 'RAM',
        yAxisID: 'yAxis-RAM',
        data: [22, 23, 23, 23, 22, 20, 22, 22, 23, 25],
        borderColor: 'blue',
        fill: false
      },
      {
        label: 'IO-RATE',
        yAxisID: 'yAxis-IO-RATE',
        data: [0.5, 0.6, 0.7, 0.8, 0.8, 0.2, 0.1, 0.1, 0.2, 0.2],
        borderColor: 'green',
        fill: false
      }
    ]
  },
  options: {
    scales: {
      xAxes: [{
        type: 'time',
        time: {
          unit: 'minute',
          displayFormats: {
            minute: 'HH:mm'
          },
          tooltipFormat: 'HH:mm:ss'
        }
      }],
      yAxes: [{
          id: 'yAxis-CPU',
          type: 'linear',
          position: 'left',
          scaleLabel: {
            display: true,
            labelString: 'CPU %'
          },
          gridLines : {
            display: false
          },
          ticks: {
            beginAtZero: true
          }
        },
        {
          id: 'yAxis-RAM',
          type: 'linear',
          position: 'left',
          scaleLabel: {
            display: true,
            labelString: 'RAM %'
          },
          gridLines : {
            display: false
          },
          ticks: {
            beginAtZero: true
          }
        },
        {
          id: 'yAxis-IO-RATE',
          type: 'linear',
          position: 'right',
          scaleLabel: {
            display: true,
            labelString: 'IO-Rate %'
          },
          gridLines : {
            display: false
          },
          ticks: {
            beginAtZero: true
          }
        }
      ]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="chart" height="90"></canvas>