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

Question

我正在尝试映射多个图表，其中 x 轴 (time) 是固定的，但 y 轴可以采用多个值，例如 CPU%、RAM、IO-RATE 等等。如果我尝试构建单独的图表，事情似乎很容易，但我有一个奇怪的要求，我需要将所有内容映射到同一个图表上。我一直在尝试使用 chartjs 库，我可以看到 Cartesian axes is capable of handling multiple axes. But the examples I find around Cartesian mostly have x-axis with some fixed label values. In my case it's time and I wonder how to do the same for time series. I also found this for multiple time series but that doesn't seem to create multiple y-axis. What is required is something like 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)
  }],

请查看下面的可运行代码片段，其中说明了如何完成。

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>

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

How to create multiple y-axis time series chart

django

d3.js

charts

chart.js

canvasjs