Javascript 将值传递给变量以在Highcharts中绘制实时图表

Javascript 将值传递给变量以在Highcharts中绘制实时图表,javascript,highcharts,Javascript,Highcharts,我正在制作一个仪表板,其中我将使用Highcharts和一个名为PeakVibrations.json的脱机json文件绘制一个实时图表,该文件存储在仪表板网页所在的同一目录中 我有一个名为PeakVibrations1.JSON的JSON文件,包含101条记录,以下是数据的子集: [ { "PeakVibrationafterAssembly" : "5.1"}, { "PeakVibrationafterAssembly" : "3"}, { "PeakVibrationafte

我正在制作一个仪表板,其中我将使用Highcharts和一个名为PeakVibrations.json的脱机json文件绘制一个实时图表,该文件存储在仪表板网页所在的同一目录中

我有一个名为PeakVibrations1.JSON的JSON文件,包含101条记录,以下是数据的子集:

[
  { "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可以理解的正确格式-此处解释了序列、数据和点的外观,此处解释了如何使用外部数据。总之,图表数据的格式不正确