带有流式插件的 Chartjs:更新 y 范围
Chartjs with streaming plugin: update y-range
我用的是Chartjs tool with streaming plugin.
我的流包含 x 的时间数据和 y 的浮点值。
y数据随时间变化很大,有时~10^-3,有时10^-9。
我的问题是,ChartJS 会根据数据集中的全部数据绘制图表,但我希望 y 轴的最小值是最小值(可见数据)而不是最小值(所有数据) (对于 y 轴最大值也是如此)。
我知道我可以降低流式插件的 TTL 值,但我想保留所有数据(我也使用 ChartJS 的缩放插件)。
您可以仅使用可见数据手动设置 ticks.min
和 ticks.max
,如下所示:
onRefresh(chart) {
var yMin = 0;
var yMax = 1;
var xMax = Date.now() - chart.options.plugins.streaming.delay;
var xMin = xMax - chart.options.plugins.streaming.duration;
// Your data refresh code
...
// Calculate yMin and yMax based on visible data only
chart.data.datasets.forEach(function(dataset) {
dataset.data.forEach(function(point) {
if (point.x >= xMin && point.x <= xMax) {
yMin = Math.min(point.y, yMin);
yMax = Math.max(point.y, yMax);
}
});
});
chart.config.options.scales.yAxes[0].ticks.min =
Chart.helpers.niceNum(yMin);
chart.config.options.scales.yAxes[0].ticks.max =
Chart.helpers.niceNum(yMax);
}
我用的是Chartjs tool with streaming plugin.
我的流包含 x 的时间数据和 y 的浮点值。
y数据随时间变化很大,有时~10^-3,有时10^-9。
我的问题是,ChartJS 会根据数据集中的全部数据绘制图表,但我希望 y 轴的最小值是最小值(可见数据)而不是最小值(所有数据) (对于 y 轴最大值也是如此)。
我知道我可以降低流式插件的 TTL 值,但我想保留所有数据(我也使用 ChartJS 的缩放插件)。
您可以仅使用可见数据手动设置 ticks.min
和 ticks.max
,如下所示:
onRefresh(chart) {
var yMin = 0;
var yMax = 1;
var xMax = Date.now() - chart.options.plugins.streaming.delay;
var xMin = xMax - chart.options.plugins.streaming.duration;
// Your data refresh code
...
// Calculate yMin and yMax based on visible data only
chart.data.datasets.forEach(function(dataset) {
dataset.data.forEach(function(point) {
if (point.x >= xMin && point.x <= xMax) {
yMin = Math.min(point.y, yMin);
yMax = Math.max(point.y, yMax);
}
});
});
chart.config.options.scales.yAxes[0].ticks.min =
Chart.helpers.niceNum(yMin);
chart.config.options.scales.yAxes[0].ticks.max =
Chart.helpers.niceNum(yMax);
}