JQuery UI Highcharts 中的滑块使用多个数据点
JQuery UI Slider in Highcharts using more then one datapoint
我在 Highcharts 中找到了 JQuery UI 滑块实现的一个很好的例子:http://jsfiddle.net/bdNnm/
这正是我想要的,除了有不止一列。我不知道如何为此设置数据结构。我有解决办法吗?
代码如下所示:
$(function () {
function updateChart(chart, value) {
chart.series[0].setData([data1[value]]);
}
function chartIncrement(identifier, value) {
$("#slider-val").text(Highcharts.dateFormat('%b %Y', data1[value][0]));
updateChart(chart, value);
}
var slideIt = true;
var data1 = [
[1362200400000, 5.20],
[1364875200000, 5.00],
[1367467200000, 5.60],
[1370145600000, 5.90],
[1372737600000, 5.80],
[1375416000000, 5.50],
[1378094400000, 5.30],
[1380686400000, 5.50],
[1383364800000, 5.00],
[1385960400000, 4.80]
];
var yMaxVal = Math.max.apply(Math, data1.map(function (o) {
return o[1];
}));
yMaxVal = Math.ceil(yMaxVal);
$("#slider-val").text(Highcharts.dateFormat('%b %Y', data1[0][0]));
// Build the chart
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'column',
borderColor: '#EBBA95',
borderWidth: 1
},
title: {
text: ''
},
yAxis: {
title: null,
min: 0,
max: yMaxVal,
tickInterval: 2
},
credits: {
enabled: false
},
legend: {
enabled: false
},
xAxis: {
title: null,
labels: {
enabled: false
},
type: 'datetime'
},
series: [{
name: 'Labor Force',
data: [data1[0]],
color: '#729fcf'
}]
});
$(function () {
$('#yearSlider').slider({
value: 0,
range: "min",
min: 0,
max: data1.length - 1,
animate: true,
slide: function (event, ui) {
chartIncrement(this, ui.value);
},
change: function (event, ui) {
chartIncrement(this, ui.value);
}
});
});
function scrollSlider() {
if (!slide_it) return false;
var slideValue;
slideValue = $("#yearSlider").slider("value");
if (slideValue >= 0) {
if (slideValue == data1.length - 1) {
slideValue = -1;
}
$("#yearSlider").slider("value", slideValue + 1);
setTimeout(scrollSlider, 1000);
}
}
$('#startSlider').click(function () {
var playPause = $("#startSlider").prop('value');
//console.log(playPause);
if (playPause == "Play") {
window.slide_it = true;
scrollSlider();
$("#startSlider").prop('value', 'Pause');
} else {
window.slide_it = false;
//console.log(playPause);
$("#startSlider").prop('value', 'Play');
}
});
});
我试图在不彻底改变你的数据结构的情况下解决这个问题。这是 fiddle:LINK
所以现在您的数据结构如下所示:
var data1 = [
// *s1* *s2* **you can add other series**
[1362200400000, 5.20, 5.40],
[1364875200000, 5.00, 5.20],
[1367467200000, 5.60, 5.80],
[1370145600000, 5.90, 6.10],
[1372737600000, 5.80, 6.00],
[1375416000000, 5.50, 5.70],
[1378094400000, 5.30, 5.50],
[1380686400000, 5.50, 5.70],
[1383364800000, 5.00, 5.20],
[1385960400000, 4.80, 5.00]
];
它基本上是一个矩阵。第一列之后的所有列都是新系列的数据。
我更改了 updateChart
函数,因此它更新每个系列而不是硬编码的 series[0]
。它不必知道有多少个系列。
function updateChart(chart, value) {
for(i=0; i<chart.series.length; i++) {
// update each series
chart.series[i].setData([data1[value][i+1]]);
}
}
我还不得不用 getMaxYValue
函数跳过一些障碍,以便它能找到所有系列数据中的最大值。
当然,也可以选择改变data1
的结构,使求最大值相对容易些。但我不知道你想用这个实现什么,我不知道你需要多健壮的代码,所以我采用了最保守的方法并尽可能少地更改你的代码。
我在 Highcharts 中找到了 JQuery UI 滑块实现的一个很好的例子:http://jsfiddle.net/bdNnm/
这正是我想要的,除了有不止一列。我不知道如何为此设置数据结构。我有解决办法吗?
代码如下所示:
$(function () {
function updateChart(chart, value) {
chart.series[0].setData([data1[value]]);
}
function chartIncrement(identifier, value) {
$("#slider-val").text(Highcharts.dateFormat('%b %Y', data1[value][0]));
updateChart(chart, value);
}
var slideIt = true;
var data1 = [
[1362200400000, 5.20],
[1364875200000, 5.00],
[1367467200000, 5.60],
[1370145600000, 5.90],
[1372737600000, 5.80],
[1375416000000, 5.50],
[1378094400000, 5.30],
[1380686400000, 5.50],
[1383364800000, 5.00],
[1385960400000, 4.80]
];
var yMaxVal = Math.max.apply(Math, data1.map(function (o) {
return o[1];
}));
yMaxVal = Math.ceil(yMaxVal);
$("#slider-val").text(Highcharts.dateFormat('%b %Y', data1[0][0]));
// Build the chart
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'column',
borderColor: '#EBBA95',
borderWidth: 1
},
title: {
text: ''
},
yAxis: {
title: null,
min: 0,
max: yMaxVal,
tickInterval: 2
},
credits: {
enabled: false
},
legend: {
enabled: false
},
xAxis: {
title: null,
labels: {
enabled: false
},
type: 'datetime'
},
series: [{
name: 'Labor Force',
data: [data1[0]],
color: '#729fcf'
}]
});
$(function () {
$('#yearSlider').slider({
value: 0,
range: "min",
min: 0,
max: data1.length - 1,
animate: true,
slide: function (event, ui) {
chartIncrement(this, ui.value);
},
change: function (event, ui) {
chartIncrement(this, ui.value);
}
});
});
function scrollSlider() {
if (!slide_it) return false;
var slideValue;
slideValue = $("#yearSlider").slider("value");
if (slideValue >= 0) {
if (slideValue == data1.length - 1) {
slideValue = -1;
}
$("#yearSlider").slider("value", slideValue + 1);
setTimeout(scrollSlider, 1000);
}
}
$('#startSlider').click(function () {
var playPause = $("#startSlider").prop('value');
//console.log(playPause);
if (playPause == "Play") {
window.slide_it = true;
scrollSlider();
$("#startSlider").prop('value', 'Pause');
} else {
window.slide_it = false;
//console.log(playPause);
$("#startSlider").prop('value', 'Play');
}
});
});
我试图在不彻底改变你的数据结构的情况下解决这个问题。这是 fiddle:LINK
所以现在您的数据结构如下所示:
var data1 = [
// *s1* *s2* **you can add other series**
[1362200400000, 5.20, 5.40],
[1364875200000, 5.00, 5.20],
[1367467200000, 5.60, 5.80],
[1370145600000, 5.90, 6.10],
[1372737600000, 5.80, 6.00],
[1375416000000, 5.50, 5.70],
[1378094400000, 5.30, 5.50],
[1380686400000, 5.50, 5.70],
[1383364800000, 5.00, 5.20],
[1385960400000, 4.80, 5.00]
];
它基本上是一个矩阵。第一列之后的所有列都是新系列的数据。
我更改了 updateChart
函数,因此它更新每个系列而不是硬编码的 series[0]
。它不必知道有多少个系列。
function updateChart(chart, value) {
for(i=0; i<chart.series.length; i++) {
// update each series
chart.series[i].setData([data1[value][i+1]]);
}
}
我还不得不用 getMaxYValue
函数跳过一些障碍,以便它能找到所有系列数据中的最大值。
当然,也可以选择改变data1
的结构,使求最大值相对容易些。但我不知道你想用这个实现什么,我不知道你需要多健壮的代码,所以我采用了最保守的方法并尽可能少地更改你的代码。