Javascript 将值传递给变量以在Highcharts中绘制实时图表
我正在制作一个仪表板,其中我将使用Highcharts和一个名为PeakVibrations.json的脱机json文件绘制一个实时图表,该文件存储在仪表板网页所在的同一目录中 我有一个名为PeakVibrations1.JSON的JSON文件,包含101条记录,以下是数据的子集:Javascript 将值传递给变量以在Highcharts中绘制实时图表,javascript,highcharts,Javascript,Highcharts,我正在制作一个仪表板,其中我将使用Highcharts和一个名为PeakVibrations.json的脱机json文件绘制一个实时图表,该文件存储在仪表板网页所在的同一目录中 我有一个名为PeakVibrations1.JSON的JSON文件,包含101条记录,以下是数据的子集: [ { "PeakVibrationafterAssembly" : "5.1"}, { "PeakVibrationafterAssembly" : "3"}, { "PeakVibrationafte
[
{ "PeakVibrationafterAssembly" : "5.1"},
{ "PeakVibrationafterAssembly" : "3"},
{ "PeakVibrationafterAssembly" : "4.3"},
{ "PeakVibrationafterAssembly" : "2.0"}
]
我已经使用highcharts网站上给出的代码片段预处理了json文件:
$.getJSON('PeakVibrations1.json', function(data) {
options.series[0].data = data;
var chart = new Highcharts.Chart(options);
});
我使用了生成实时随机数据(link is)的代码,因为我必须将json文件数据传递到图表,而不是随机数据,所以我做了一些更改,
我需要在highcharts中制作的实时图表的代码是:
$(document).ready(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
Highcharts.chart('container', {
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = json.parse(data);
series.addPoint([x, y], true, true);
}, 1000);
}
}
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
title: {
text: 'VibrationValue'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'Live data',
data: (function () {
// pass value to x and y
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i += 1) {
data.push({
x: time + i * 1000,
y: json.parsedata()
});
}
return data;
}())
}]
}); });
$(文档).ready(函数(){
Highcharts.setOptions({
全球:{
useUTC:false
}
});
Highcharts.chart('容器'{
图表:{
类型:“样条线”,
动画:Highcharts.svg,//不要在旧IE中设置动画
marginRight:10,
活动:{
加载:函数(){
//设置图表的每秒更新
var系列=本系列[0];
setInterval(函数(){
var x=(新日期()).getTime(),//当前时间
y=json.parse(数据);
系列。添加点([x,y],真,真);
}, 1000);
}
}
},
标题:{
文本:“实时随机数据”
},
xAxis:{
键入:“日期时间”,
像素间隔:150
},
亚克斯:{
标题:{
文本:“振动值”
},
绘图线:[{
值:0,
宽度:1,
颜色:'#808080'
}]
},
工具提示:{
格式化程序:函数(){
返回“+this.series.name+”
+
Highcharts.dateFormat(“%Y-%m-%d%H:%m:%S',this.x)+'
'+
数字格式(this.y,2);
}
},
图例:{
已启用:false
},
出口:{
已启用:false
},
系列:[{
名称:“实时数据”,
数据:(函数(){
//将值传递给x和y
var数据=[],
时间=(新日期()).getTime(),
我
对于(i=-19;i),您的代码和描述不允许回答此问题。请阅读。您如何将变量发送到客户端?您的图表配置是什么?csv文件的示例也会很有帮助。@morganfree我已更新了问题,等待您对我的问题的友好推荐。谢谢addpoint()只添加一个点,如果json包含多个点,则需要使用series.setData()或series.update()等方法-在此之前,必须将json解析为Highcharts可以理解的正确格式-此处解释了序列、数据和点的外观,此处解释了如何使用外部数据。总之,图表数据的格式不正确