如何创建多Y轴时间序列图？

Question

我正在尝试映射多个图表，其中X轴(time)是固定的，但是y轴可以取多个值，比如CPU%，RAM，IO-RATE等等。如果我尝试建立单独的图表，事情似乎很容易，但我有一个奇怪的要求，我需要把所有的东西都映射到同一个图表上。我一直在尝试用 chartjs 图书馆，我可以看到 笛卡尔轴 是能够处理多轴的。但我发现周围的例子 Cartesian 大部分的x轴都有一些固定的标签值。在我的情况下，这是时间，我想知道如何做相同的 时间序列. 我还发现这个 例子 对于 multiple time series 但这似乎并不能创建多个y轴。需要的是类似于 这个 但我很难想出如何实现这个目标。

我使用的是 django 的后端，我愿意尝试任何可以做到这一点的库，并且可以轻松地与 django. 目前，我一直在探索与 chartjs.

Answer 1

首先你需要定义一个独特的 xAxis 并将其定义为 时轴.

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

然后你定义一个 线性笛声 yAxis 对于每个 dataset 并确保，的价值。yAxis.id 匹配 dataset.yAxisID. 使用'yAxis.position'来定义轴是否会出现。left 或 right 的图表。

您也可以选择定义以下内容 插件核心API beforeLayout 函数，确保一个 yAxis 当通过鼠标点击图例标签隐藏其数据集时，也会被隐藏。

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

请看下面的可运行代码片段，以说明如何做到这一点。

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>