Javascript Highcharts饼图上的设置数据不工作
我正在使用Highchart库显示饼图。我有两组数据要显示,我会无限期地每隔5秒在这两组数据之间切换。当我加载初始数据集时,图表会按应有的方式显示。当我加载第二组数据(使用Javascript Highcharts饼图上的设置数据不工作,javascript,jquery,highcharts,Javascript,Jquery,Highcharts,我正在使用Highchart库显示饼图。我有两组数据要显示,我会无限期地每隔5秒在这两组数据之间切换。当我加载初始数据集时,图表会按应有的方式显示。当我加载第二组数据(使用setData)时,图表会按应有的方式更改。但是,所有随后对setData的调用似乎都不起作用。我希望图表会根据新数据一次又一次地变化。但是什么也没有发生,控制台中也没有记录错误。我可能做错了什么 这是我的密码: var chart24HoursTop5; var lastSet = 1; var set1 = [{
setData
)时,图表会按应有的方式更改。但是,所有随后对setData
的调用似乎都不起作用。我希望图表会根据新数据一次又一次地变化。但是什么也没有发生,控制台中也没有记录错误。我可能做错了什么
这是我的密码:
var chart24HoursTop5;
var lastSet = 1;
var set1 = [{
"seconds": 754,
"y": 754,
"downtime": "00:05:07",
"siteNumber": "13",
"siteName": "Preston",
"name": "Preston",
"motorolaNumber": "SZ092C113",
"system": "SZ Quantar",
"channels": "5",
"towerOwner": "Wynn Communications",
"shelterOwner": "Wynn Communications",
"equipmentOwner": "DPS",
"latitude": "35.724833",
"longitude": "-95.988333",
"color": "#348AA7"
}, {
"seconds": 20,
"y": 20,
"downtime": "00:00:20",
"siteNumber": "29",
"siteName": "Bakers Peak",
"name": "Bakers Peak",
"motorolaNumber": "SZ092C129",
"system": "SZ Quantar",
"channels": "5",
"towerOwner": "FBI",
"shelterOwner": "DPS",
"equipmentOwner": "DPS",
"latitude": "34.839722",
"longitude": "-98.803333",
"color": "#ffa600"
}, {
"seconds": 19,
"y": 19,
"downtime": "00:00:19",
"siteNumber": "30",
"siteName": "Walters",
"name": "Walters",
"motorolaNumber": "SZ092C130",
"system": "SZ Quantar",
"channels": "5",
"towerOwner": "Cotton Electric",
"shelterOwner": "DPS",
"equipmentOwner": "DPS",
"latitude": "34.358583",
"longitude": "-98.321583",
"color": "#cb5464"
}, {
"seconds": 12,
"y": 12,
"downtime": "00:00:12",
"siteNumber": "69",
"siteName": "Hominy",
"name": "Hominy",
"motorolaNumber": "SZ092C169",
"system": "P25 GTR",
"channels": "",
"towerOwner": "Grand River Dam Authority",
"shelterOwner": "Grand River Dam Authority",
"equipmentOwner": "GRDA",
"latitude": "36.4",
"longitude": "-96.4863888888889",
"color": "#82F2C0"
}];
var set2 = [{
"seconds": 691,
"y": 691,
"downtime": "691 Sec",
"siteNumber": "13",
"siteName": "Preston 2",
"name": "Preston 2",
"motorolaNumber": "SZ092C113",
"system": "SZ Quantar",
"channels": "5",
"towerOwner": "Wynn Communications",
"shelterOwner": "Wynn Communications",
"equipmentOwner": "DPS",
"latitude": "35.724833",
"longitude": "-95.988333",
"color": "#348AA7"
}, {
"seconds": 10,
"y": 10,
"downtime": "10 Sec",
"siteNumber": "29",
"siteName": "Bakers Peak 2",
"name": "Bakers Peak 2",
"motorolaNumber": "SZ092C129",
"system": "SZ Quantar",
"channels": "5",
"towerOwner": "FBI",
"shelterOwner": "DPS",
"equipmentOwner": "DPS",
"latitude": "34.839722",
"longitude": "-98.803333",
"color": "#ffa600"
}, {
"seconds": 1,
"y": 1,
"downtime": "1 Sec",
"siteNumber": "30",
"siteName": "Walters 2",
"name": "Walters 2",
"motorolaNumber": "SZ092C130",
"system": "SZ Quantar",
"channels": "5",
"towerOwner": "Cotton Electric",
"shelterOwner": "DPS",
"equipmentOwner": "DPS",
"latitude": "34.358583",
"longitude": "-98.321583",
"color": "#cb5464"
}, {
"seconds": 5,
"y": 5,
"downtime": "5 Sec",
"siteNumber": "69",
"siteName": "Hominy 2",
"name": "Hominy 2",
"motorolaNumber": "SZ092C169",
"system": "P25 GTR",
"channels": "",
"towerOwner": "Grand River Dam Authority",
"shelterOwner": "Grand River Dam Authority",
"equipmentOwner": "GRDA",
"latitude": "36.4",
"longitude": "-96.4863888888889",
"color": "#82F2C0"
}];
$(document).ready(function () {
var optionsFor24HoursTop5 = {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
credits: {
enabled: false
},
title: {
text: 'Last 24 Hours'
},
tooltip: {
pointFormat: '{series.name}: {point.downtime}'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '{point.name}: {point.downtime}'
}
}
},
series: [{
name: 'DropSum',
colorByPoint: true,
data: set1
}]
};
chart24HoursTop5 = Highcharts.chart("chartContainer", optionsFor24HoursTop5);
setTimeout(changeData, 5000);
});
function changeData() {
if (lastSet == 1) {
chart24HoursTop5.series[0].setData(set2);
lastSet = 2;
} else {
chart24HoursTop5.series[0].setData(set1);
lastSet = 1;
}
下面是一个完全工作的JSFIDLE示例:
在本例中,您会注意到图表最初显示,5秒钟后,数据会发生变化并反映在图表显示中。但是,数据每5秒再次更改一次,这些更改都不会反映在图表显示中。为什么Highcharts在第一次更改后不显示更新的数据?这似乎是某种错误(?),但解决方法似乎是指定在设置数据时不应更新点。例如():
这并不意味着没有动画,因为这些点被废弃并创建了新的点。然而,似乎正是这种点的更新阻止了更新的发生,因此希望主要问题也能得到解决。这似乎是某种缺陷(?),但解决方法似乎是指定在设置数据时不应更新点。例如():
这并不意味着没有动画,因为这些点被废弃并创建了新的点。然而,似乎正是这些点的更新阻止了更新的发生,因此希望主要问题也能得到解决。对于性能高图,原始数据数组发生变化,这导致变量
set1
和set2
在第一次更新后是相同的
解决方案可以是按函数返回数据:
function set1() {
return [...];
}
function set2() {
return [...];
}
function changeData() {
if (lastSet == 1) {
chart24HoursTop5.series[0].setData(set2());
lastSet = 2;
} else {
chart24HoursTop5.series[0].setData(set1());
lastSet = 1;
}
setTimeout(changeData, 2000);
}
现场演示:对于Performance Highcharts,对原始数据数组进行变异,这导致变量
set1
和set2
在第一次更新后相同
解决方案可以是按函数返回数据:
function set1() {
return [...];
}
function set2() {
return [...];
}
function changeData() {
if (lastSet == 1) {
chart24HoursTop5.series[0].setData(set2());
lastSet = 2;
} else {
chart24HoursTop5.series[0].setData(set1());
lastSet = 1;
}
setTimeout(changeData, 2000);
}
现场演示: