javascript - highstock(highchart) livedata 可以有移动动画点吗?
问题描述
我可以在末尾放一个闪烁的指针吗?
还是我必须使用另一个插件?
我想要一个像图像一样跟随行尾的指针。
我想像二元期权或专家期权一样构建。
这是我的简单演示:
$(function() {
Highcharts.setOptions({
global: {
useUTC: false
}
});
// Create the chart
$('#container').highcharts('StockChart', {
chart: {
events: {
load: function() {
// set up the updating of the chart each second
var series = this.series[0];
var hasPlotLine = false,
$button = $('#button'),
chart = $('#container').highcharts();
setInterval(function() {
chart.yAxis[0].removePlotLine('plot-line-1');
var x = (new Date()).getTime(), // current time
y = Math.round(Math.random() * 100);
series.addPoint([x, y], true, true);
chart.yAxis[0].addPlotLine({
value: y,
color: 'red',
width: 2,
id: 'plot-line-1'
});
}, 1000);
}
}
},
rangeSelector: {
buttons: [{
count: 1,
type: 'minute',
text: '1M'
}, {
count: 5,
type: 'minute',
text: '5M'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: false,
selected: 0
},
title: {
text: 'Live random data'
},
exporting: {
enabled: false
},
series: [{
name: 'Random data',
data: (function() {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -999; i <= 0; i += 1) {
data.push([
time + i * 1000,
Math.round(Math.random() * 100)
]);
}
return data;
}())
}]
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px"></div>
也可在 JsFiddle 上获得:示例演示链接
解决方案
Highcharts. SVGRenderer
您可以通过使用类来实现所需的结果。您需要绘制一条路径和三个圆圈,并通过更改它们的位置来为它们设置动画。例如:
chart: {
events: {
load: function() {
// set up the updating of the chart each second
var chart = this,
series = chart.series[0],
lastPoint = series.points[series.points.length - 1],
xPos = lastPoint.plotX + chart.plotLeft,
yPos = lastPoint.plotY + chart.plotTop,
pointerSize = 16;
var animatedPointGroup = this.renderer.g().attr({
translateX: xPos - pointerSize / 2,
translateY: yPos - pointerSize / 2
}).add();
var plotLine = this.renderer.path([
'M', chart.plotLeft, yPos,
'L', xPos, yPos
])
.attr({
stroke: '#008dc4',
'stroke-width': 1
})
.add();
var shadowCircle = this.renderer.circle(
pointerSize / 2,
pointerSize / 2,
pointerSize
).attr({
fill: '#d3d7de'
}).add(animatedPointGroup);
this.renderer.circle(
pointerSize / 2,
pointerSize / 2,
6
).attr({
fill: '#ffffff'
}).add(animatedPointGroup);
this.renderer.circle(
pointerSize / 2,
pointerSize / 2,
3
).attr({
fill: '#008dc4'
}).add(animatedPointGroup);
setInterval(function() {
var x = (new Date()).getTime(), // current time
y = Math.round(Math.random() * 100),
point,
xPos,
yPos;
series.addPoint([x, y], true, true);
point = series.points[series.points.length - 1];
xPos = point.plotX + chart.plotLeft;
yPos = point.plotY + chart.plotTop;
animatedPointGroup.animate({
translateX: xPos - pointerSize / 2,
translateY: yPos - pointerSize / 2
});
plotLine.animate({
d: [
'M', chart.plotLeft, yPos,
'L', xPos, yPos
]
});
shadowCircle.animate({
r: shadowCircle.attr('r') === pointerSize ? pointerSize / 2 : pointerSize
});
}, 1000);
}
}
}
现场演示:http: //jsfiddle.net/BlackLabel/z4c0or3u/
API参考:
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer
https://api.highcharts.com/class-reference/Highcharts.SVGElement#animate
https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr
推荐阅读
- javascript - 无法启动 Vue CLI 项目
- ansible - 将 2 个寄存器输出行(每个都有值列表)传递/循环到 Ansible 中的下一个任务
- c# - 如何使用 Visual Studio 2017 调试器准确判断哪行代码更改了 C# 中的给定变量?
- go - golang并发一次的问题
- sql - SQL Server:合并同一张表的两行
- html - 行更改列数时如何更改填充?
- django - 如何让 Django LoginRequiredMixin 工作?
- fiware - FIWARE 实验室 - 我的 dockerhub 映像创建为空
- r - 如何使用 purrr 应用将数据框作为输入的函数
- angular - VS Code Prettier 扩展将单引号替换为双引号并去除反斜杠标记