如何創建多個 y 軸時間序列圖表

Question

我正在嘗試 map 多個圖表，其中 x 軸（ time ）是固定的，但 y 軸可以采用多個值，如 CPU%、RAM、IO-RATE 等。 如果我嘗試構建單獨的圖表，事情似乎很容易，但我有一個奇怪的要求，我需要將 map 的所有內容都放在同一個圖表上。 我一直在嘗試使用chartjs庫，我可以看到笛卡爾軸能夠處理多個軸。 但是我在Cartesian周圍找到的示例大多具有 x 軸和一些固定的 label 值。 就我而言，是時候了，我想知道如何為time series做同樣的事情。 我還為multiple time series找到了這個示例，但這似乎並沒有創建多個 y 軸。 需要的是這樣的東西，但我很難弄清楚如何實現這一目標。

我正在使用django作為后端，我願意嘗試任何可以做到這一點的庫，並且可以輕松地與django集成。 目前我一直在用chartjs進行探索。

Answer 1

首先，您需要定義一個唯一的xAxis並將其定義為時間笛卡爾軸。

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

然后為每個dataset定義一個 線性笛卡爾yAxis並確保yAxis.id的值與相應的dataset.yAxisID匹配。 使用 'yAxis.position' 定義軸應出現在圖表的left還是right 。

或者，您還可以定義以下插件核心 API beforeLayout function 確保當通過鼠標單擊圖例 ZD304BA20E96D870311588EEABAC8 隱藏數據集時， 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>