我发现Highcharts样条曲线在示例中每秒都在更新。https://www.highcharts.com/demo/highcharts/dynamic-update
但是在这个例子中只有一个数据数组。我试图将这个例子适用于多个数组,但我遇到了以下问题。图表在前10次顺利更新。第10个数字是数组的指定最大长度,克服它后,图表上最旧的点被擦除。所以,在10次之后,只有最近的数组被顺利绘制,前两个会立即出现,没有动画。我想这是由于最后一个点将被写入哪个数组。
我尝试使用setData()而不是addPoint,但结果并不好。
我的例子:https://jsfiddle.net/krouvy/Lptgkod0/5/
const onChartLoad = function () {
const chart = this,
series = chart.series,
data = []
for (let i = -19; i <= 0; i += 1) {
data.push({
x: null,
y: null
})
}
chart.addSeries({
name: "Random data1",
lineWidth: 2,
color: Highcharts.getOptions().colors[2],
data: data,
animation: {
duration: 1,
}
})
chart.addSeries({
name: "Random data2",
lineWidth: 2,
color: "red",
data: data,
animation: {
duration: 1,
}
})
chart.addSeries({
name: "Random data3",
lineWidth: 2,
color: "blue",
data: data,
animation: {
duration: 1,
}
})
let interval = setInterval(function () {
const x = new Date().getTime(),
y = Math.random()
series[0].addPoint([x, y], true, true)
series[1].addPoint([x, y], true, true)
series[2].addPoint([x, y], true, true)
}, 1000)
}
// Plugin to add a pulsating marker on add point
Highcharts.addEvent(Highcharts.Series, "addPoint", e => {
const point = e.point,
series = e.target
if (!series.pulse) {
series.pulse = series.chart.renderer.circle()
.add(series.markerGroup)
}
setTimeout(() => {
series.pulse
.attr({
x: series.xAxis.toPixels(point.x, true),
y: series.yAxis.toPixels(point.y, true),
r: series.options.marker.radius,
opacity: 1,
fill: series.color
})
.animate({
r: 20,
opacity: 0
}, {
duration: 1000
})
}, 1)
})
Highcharts.chart("container", {
accessibility: {
enabled: false
},
chart: {
backgroundColor: "#252734",
type: "spline",
events: {
load: onChartLoad
}
},
time: {
useUTC: false
},
title: {
text: "Live random data",
style: {
color: "#FFF"
}
},
xAxis: {
type: "datetime",
tickPixelInterval: 150,
maxPadding: 0.1,
lineColor: "#FFF",
labels: {
style: {
color: "#FFF",
fontWeight: 400,
fontSize: "13px"
}
},
},
yAxis: {
title: {
text: "values",
style: {
color: "#FFF",
fontWeight: 400,
fontSize: "13px"
}
},
labels: {
style: {
color: "#FFF",
fontWeight: 400,
fontSize: "13px"
}
},
plotLines: [{value: 0, width: 1, color: "#808080"}]
},
tooltip: {
headerFormat: "<b>{series.name}</b><br/>",
pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}"
},
legend: {
itemStyle: {
color: "#FFF",
fill: "#FFF",
fontWeight: 700,
fontSize: "12px",
fontFamily: `Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif`,
}
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
})
字符串
enter image description here的
我试图实现图形上所有线条的平滑动画,就像在Highcharts示例中的单线一样。我在显示图形或添加第二条线时没有问题。唯一的问题是数组达到最大长度后缺乏平滑度。
1条答案
按热度按时间5us2dqdw1#
这是因为每次调用
addPoint
后都要重绘图表,每次间隔调用只重绘一次就足够了。字符串
现场演示:https://jsfiddle.net/BlackLabel/vdg1yqho/
**API引用:**https:api.highcharts.com/class-reference/Highcharts.Series#addPoint