Javascript 使用Ajax自动更新Highcharts

希望有人能在这里帮助我

我正在尝试使用ajax的信息更新一个图形，我已经确认ajax的格式正确，初始图形加载工作正常，但似乎没有正确更新

我的代码：

$(document).ready(function() {

    var options = {
        chart: {
            renderTo: 'cpuhealth',
            type: 'column'
        },
        title: {
            text: 'CPU Usage'
        },
        yAxis: {
            labels: {
                formatter: function() {
                    return this.value + ' %';
                }
            },
            title: {
                text: 'Usage (%)'
            }
        },
        xAxis: {
            title: {
                text: 'CPU Core ID#'
            }
        },
        tooltip: {
            formatter: function() {
                return 'CPU Core: <b>' + this.x + '</b><br>Usage <b>' + this.y + '%</b>';
            }
        },
        legend: {
            enabled: false
        },
        series: [{}]
    };


    var chart;
    $.getJSON('http://url-to-json-file/index.php', function(jsondata) {
        options.series[0].data = JSON.parse(jsondata.cpu);
        chart = new Highcharts.Chart(options);
    });

    window.setInterval(function(){
        var chart = new Highcharts.Chart(options);
        $.getJSON('http://url-to-json-file/index.php', function(jsondata) {
            options.series[0].data = JSON.parse(jsondata.cpu);
        });
    }, 5000);
});

$（文档）.ready（函数（）{
变量选项={
图表：{
renderTo:“cpuhealth”，
类型：“列”
},
标题：{
文本：“CPU使用率”
},
亚克斯：{
标签：{
格式化程序：函数（）{
返回此值。值+'%'；
}
},
标题：{
文本：“使用率（%）”
}
},
xAxis：{
标题：{
文本：“CPU核心ID#”
}
},
工具提示：{
格式化程序：函数（）{
返回'CPU核心：'+this.x+'
用法'+this.y+'%；
}
},
图例：{
已启用：false
},
系列：[{}]
};
var图；
$.getJSON（'http://url-to-json-file/index.php，函数（jsondata）{
options.series[0].data=JSON.parse（jsondata.cpu）；
图表=新的高点图表。图表（选项）；
});
setInterval（函数（）{
var图表=新的Highcharts.图表（选项）；
$.getJSON（'http://url-to-json-file/index.php，函数（jsondata）{
options.series[0].data=JSON.parse（jsondata.cpu）；
});
}, 5000);
});

JSON正在正常运行，但它只是没有每5秒更新一次图表：(

非常感谢您的帮助，我是JS的新手。

您试过了吗

 events: {
      load: function() {

    // set up the updating of the chart each second
    var series = this.series[0];
    setInterval(function(){
    var chart = new Highcharts.Chart(options);
    $.getJSON('http://url-to-json-file/index.php', function(jsondata) {
        options.series[0].data = JSON.parse(jsondata.cpu);
    });
    }, 5000);
   }              
}

那么你的图表数据就是

var options = {
    chart: {
        renderTo: 'cpuhealth',
        type: 'column'
    },
    title: {
        text: 'CPU Usage'
    },
    events: {
          load: function() {

        // set up the updating of the chart each second
        var series = this.series[0];
        setInterval(function(){
        var chart = new Highcharts.Chart(options);
        $.getJSON('http://url-to-json-file/index.php', function(jsondata) {
            options.series[0].data = JSON.parse(jsondata.cpu);
        });
        }, 5000);
       }              
    },
    yAxis: {
        labels: {
            formatter: function() {
                return this.value + ' %';
            }
        },
        title: {
            text: 'Usage (%)'
        }
    },
    xAxis: {
        title: {
            text: 'CPU Core ID#'
        }
    },
    tooltip: {
        formatter: function() {
            return 'CPU Core: <b>' + this.x + '</b><br>Usage <b>' + this.y + '%</b>';
        }
    },
    legend: {
        enabled: false
    },
    series: [{}]
};

var选项={
图表：{
renderTo:“cpuhealth”，
类型：“列”
},
标题：{
文本：“CPU使用率”
},
活动：{
加载：函数（）{
//设置图表的每秒更新
var系列=本系列[0]；
setInterval（函数（）{
var图表=新的Highcharts.图表（选项）；
$.getJSON（'http://url-to-json-file/index.php，函数（jsondata）{
options.series[0].data=JSON.parse（jsondata.cpu）；
});
}, 5000);
}              
},
亚克斯：{
标签：{
格式化程序：函数（）{
返回此值。值+'%'；
}
},
标题：{
文本：“使用率（%）”
}
},
xAxis：{
标题：{
文本：“CPU核心ID#”
}
},
工具提示：{
格式化程序：函数（）{
返回'CPU核心：'+this.x+'
用法'+this.y+'%；
}
},
图例：{
已启用：false
},
系列：[{}]
};

您是否尝试过

 events: {
      load: function() {

    // set up the updating of the chart each second
    var series = this.series[0];
    setInterval(function(){
    var chart = new Highcharts.Chart(options);
    $.getJSON('http://url-to-json-file/index.php', function(jsondata) {
        options.series[0].data = JSON.parse(jsondata.cpu);
    });
    }, 5000);
   }              
}

那么你的图表数据就是

var options = {
    chart: {
        renderTo: 'cpuhealth',
        type: 'column'
    },
    title: {
        text: 'CPU Usage'
    },
    events: {
          load: function() {

        // set up the updating of the chart each second
        var series = this.series[0];
        setInterval(function(){
        var chart = new Highcharts.Chart(options);
        $.getJSON('http://url-to-json-file/index.php', function(jsondata) {
            options.series[0].data = JSON.parse(jsondata.cpu);
        });
        }, 5000);
       }              
    },
    yAxis: {
        labels: {
            formatter: function() {
                return this.value + ' %';
            }
        },
        title: {
            text: 'Usage (%)'
        }
    },
    xAxis: {
        title: {
            text: 'CPU Core ID#'
        }
    },
    tooltip: {
        formatter: function() {
            return 'CPU Core: <b>' + this.x + '</b><br>Usage <b>' + this.y + '%</b>';
        }
    },
    legend: {
        enabled: false
    },
    series: [{}]
};

var选项={
图表：{
renderTo:“cpuhealth”，
类型：“列”
},
标题：{
文本：“CPU使用率”
},
活动：{
加载：函数（）{
//设置图表的每秒更新
var系列=本系列[0]；
setInterval（函数（）{
var图表=新的Highcharts.图表（选项）；
$.getJSON（'http://url-to-json-file/index.php，函数（jsondata）{
options.series[0].data=JSON.parse（jsondata.cpu）；
});
}, 5000);
}              
},
亚克斯：{
标签：{
格式化程序：函数（）{
返回此值。值+'%'；
}
},
标题：{
文本：“使用率（%）”
}
},
xAxis：{
标题：{
文本：“CPU核心ID#”
}
},
工具提示：{
格式化程序：函数（）{
返回'CPU核心：'+this.x+'
用法'+this.y+'%；
}
},
图例：{
已启用：false
},
系列：[{}]
};

可能的dup：您可以在尝试使用上述URL时检查此项以供参考。我收到此错误“Uncaught TypeError:Object”没有方法“setData”在其他每次ajax调用的控制台日志中。@rockStar也尝试了这一点，我也无法从这段代码中找到一个修复程序。因此，所有操作都正常，对吗？可能的dup：当尝试使用上述URL时，您可以检查这一点以供参考。我收到此错误“Uncaught TypeError:Object”没有方法“setData”在其他每次ajax调用的控制台日志中。@rockStar也尝试了这一点，我也无法从这段代码中找到修复程序。所以一切正常，对吗？