我有一个像 1d|1w|1m|3m|6m| 这样的自定义范围选择器的要求 当我点击任何范围选择器按钮时，需要更改 x 轴标签（日期时间）。如果我点击 1d，我想要每小时基础，如 00.00,01.00,02.00 ......我点击 1w x 轴标签是 jan-1 ,1 月 2 日,1 月 3 日 ...
我试过如下
$(function() {
function getData(){
var testData = [[Date.UTC(2013,05,26,00,00),24],[Date.UTC(2013,05,26,01,00),11],[Date.UTC(2013,05,26,02,00),12],[Date.UTC(2013,05,26,03,00),16],[Date.UTC(2013,05,26,04,00),14],[Date.UTC(2013,05,26,05,00),34],[Date.UTC(2013,05,26,06,00),17],[Date.UTC(2013,05,26,07,00),24],[Date.UTC(2013,05,26,08,00),09],[Date.UTC(2013,05,26,09,00),05],[Date.UTC(2013,05,26,10,00),23],[Date.UTC(2013,05,26,11,00),20],[Date.UTC(2013,05,26,12,00),19],[Date.UTC(2013,05,26,13,00),21],[Date.UTC(2013,05,26,14,00),12],[Date.UTC(2013,05,26,15,00),15],[Date.UTC(2013,05,26,16,00),07],[Date.UTC(2013,05,26,17,00),32],[Date.UTC(2013,05,26,18,00),06],[Date.UTC(2013,05,26,19,00),12],[Date.UTC(2013,05,26,20,00),16],[Date.UTC(2013,05,26,21,00),18],[Date.UTC(2013,05,26,22,00),12],[Date.UTC(2013,05,26,23,00),14]];
return testData;
}
function secondData(){
var helloData = [[Date.UTC(2013,05,26,00,00),11],[Date.UTC(2013,05,26,01,00),21],[Date.UTC(2013,05,26,02,00),22],[Date.UTC(2013,05,26,03,00),16],[Date.UTC(2013,05,26,04,00),14],[Date.UTC(2013,05,26,05,00),34],[Date.UTC(2013,05,26,06,00),17],[Date.UTC(2013,05,26,07,00),24],[Date.UTC(2013,05,26,08,00),09],[Date.UTC(2013,05,26,09,00),05],[Date.UTC(2013,05,26,10,00),23],[Date.UTC(2013,05,26,11,00),20],[Date.UTC(2013,05,26,12,00),19],[Date.UTC(2013,05,26,13,00),21],[Date.UTC(2013,05,26,14,00),12],[Date.UTC(2013,05,26,15,00),15],[Date.UTC(2013,05,26,16,00),07],[Date.UTC(2013,05,26,17,00),32],[Date.UTC(2013,05,26,18,00),12],[Date.UTC(2013,05,26,19,00),12],[Date.UTC(2013,05,26,20,00),16],[Date.UTC(2013,05,26,21,00),11],[Date.UTC(2013,05,26,22,00),06],[Date.UTC(2013,05,26,23,00),11]];
return helloData;
}
// Create the chart
window.chart = new Highcharts.StockChart({
chart : {
renderTo : 'container',
width: 900,
events: {
load: function () {
var chart = this,
buttons = chart.rangeSelector.buttons;
var indexvalue = 0;
for(indexvalue; indexvalue<buttons.length;indexvalue++){
console.debug("clicked button is :"+buttons[indexvalue]);
}
function reset_all_buttons(){
$.each(chart.rangeSelector.buttons, function(index, value) {
value.setState(0);
});
series = chart.get('EnergyConsumption_data');
series.remove();
series = chart.get('OutDoorTemperature_data');
series.remove();
}
buttons[3].on('click', function (e) {
console.debug("button value is :"+buttons[3]);
reset_all_buttons();
chart.rangeSelector.buttons[3].setState(2);
jQuery.ajax({
data: {"CMD":"dataVisualization","chartDataType":'#fragment-3m'},
type: "GET",
url: "<%=getDataVisualization.toString()%>",
success: function(data) {
}
});
chart.xAxis[0].update({tickInterval : 24 * 3600 * 1000});
chart.addSeries({
name : 'Energy Consumption',
id : 'EnergyConsumption_data',
data : getData(),
pointInterval: 24 * 3600 * 1000
});
chart.addSeries({
name : 'OutDoor Temperature',
id : 'OutDoorTemperature_data',
data : secondData(),
pointInterval: 24 * 3600 * 1000
});
});
buttons[2].on('click', function (e) {
console.debug("hello onclick of the button ");
reset_all_buttons();
chart.rangeSelector.buttons[2].setState(2);
jQuery.ajax({
data: {"CMD":"dataVisualization","chartDataType":'#fragment-1m'},
type: "GET",
url: "<%=getDataVisualization.toString()%>",
success: function(data) {
}
});
chart.xAxis[0].update({tickInterval : 24 * 3600 * 1000});
chart.addSeries({
name : 'Energy Consumption',
id : 'EnergyConsumption_data',
data : getData(),
pointInterval: 24 * 3600 * 1000
});
chart.addSeries({
name : 'OutDoor Temperature',
id : 'OutDoorTemperature_data',
data : secondData(),
pointInterval: 24 * 3600 * 1000
});
});
buttons[1].on('click', function (e) {
console.debug("hello onclick of the button ");
reset_all_buttons();
chart.rangeSelector.buttons[1].setState(2);
jQuery.ajax({
data: {"CMD":"dataVisualization","chartDataType":'#fragment-1w'},
type: "GET",
url: "<%=getDataVisualization.toString()%>",
success: function(data) {
}
});
chart.xAxis[0].update({tickInterval : 24 * 3600 * 1000});
chart.addSeries({
name : 'Energy Consumption',
id : 'EnergyConsumption_data',
yAxis: 1,
data : [[Date.UTC(2013,05,20),12],[Date.UTC(2013,05,21),14],[Date.UTC(2013,05,22),16],[Date.UTC(2013,05,23),22],[Date.UTC(2013,05,24),11],[Date.UTC(2013,05,25),10],[Date.UTC(2013,05,26),14]],
pointInterval: 24 * 3600 * 1000
});
chart.addSeries({
name : 'OutDoor Temperature',
id : 'OutDoorTemperature_data',
data : [[Date.UTC(2013,05,20),24],[Date.UTC(2013,05,21),14],[Date.UTC(2013,05,22),16],[Date.UTC(2013,05,23),22],[Date.UTC(2013,05,24),11],[Date.UTC(2013,05,25),10],[Date.UTC(2013,05,26),14]],
pointInterval: 24 * 3600 * 1000
});
});
buttons[0].on('click', function (e) {
console.debug("hello onclick of the button ");
reset_all_buttons();
chart.rangeSelector.buttons[0].setState(2);
jQuery.ajax({
data: {"CMD":"dataVisualization","chartDataType":'#fragment-1d'},
type: "GET",
url: "<%=getDataVisualization.toString()%>",
success: function(data) {
}
});
chart.xAxis[0].update({tickInterval : 3 * 3600 * 1000,ordinal: false});
chart.addSeries({
name : 'Energy Consumption',
id : 'EnergyConsumption_data',
yAxis: 1,
data : [[Date.UTC(2013,05,26,00,00),24],[Date.UTC(2013,05,26,01,00),11],[Date.UTC(2013,05,26,02,00),12],[Date.UTC(2013,05,26,03,00),16],[Date.UTC(2013,05,26,04,00),14],[Date.UTC(2013,05,26,05,00),34],[Date.UTC(2013,05,26,06,00),17],[Date.UTC(2013,05,26,07,00),24],[Date.UTC(2013,05,26,08,00),09],[Date.UTC(2013,05,26,09,00),05],[Date.UTC(2013,05,26,10,00),23],[Date.UTC(2013,05,26,11,00),20],[Date.UTC(2013,05,26,12,00),19],[Date.UTC(2013,05,26,13,00),21],[Date.UTC(2013,05,26,14,00),12],[Date.UTC(2013,05,26,15,00),15],[Date.UTC(2013,05,26,16,00),07],[Date.UTC(2013,05,26,17,00),32],[Date.UTC(2013,05,26,18,00),06],[Date.UTC(2013,05,26,19,00),12],[Date.UTC(2013,05,26,20,00),16],[Date.UTC(2013,05,26,21,00),18]],
pointInterval: 1 * 3600 * 1000
});
chart.addSeries({
name : 'OutDoor Temperature',
id : 'OutDoorTemperature_data',
data : [[Date.UTC(2013,05,26,00,00),11],[Date.UTC(2013,05,26,01,00),21],[Date.UTC(2013,05,26,02,00),22],[Date.UTC(2013,05,26,03,00),16],[Date.UTC(2013,05,26,04,00),14],[Date.UTC(2013,05,26,05,00),34],[Date.UTC(2013,05,26,06,00),17],[Date.UTC(2013,05,26,07,00),24],[Date.UTC(2013,05,26,08,00),09],[Date.UTC(2013,05,26,09,00),05],[Date.UTC(2013,05,26,10,00),23],[Date.UTC(2013,05,26,11,00),20],[Date.UTC(2013,05,26,12,00),19],[Date.UTC(2013,05,26,13,00),21],[Date.UTC(2013,05,26,14,00),12],[Date.UTC(2013,05,26,15,00),15],[Date.UTC(2013,05,26,16,00),07],[Date.UTC(2013,05,26,17,00),32],[Date.UTC(2013,05,26,18,00),12],[Date.UTC(2013,05,26,19,00),12],[Date.UTC(2013,05,26,20,00),16],[Date.UTC(2013,05,26,21,00),11]],
pointInterval: 1 * 3600 * 1000
});
});
}
}
},
rangeSelector : {
selected : 0,
buttons: [{
type: 'day',
count: 1,
text: '1d'
},
{
type: 'week',
count: 1,
text: '1w'
},
{
type: 'month',
count: 1,
text: '1m'
}, {
type: 'month',
count: 3,
text: '3m'
}, {
type: 'month',
count: 6,
text: '6m'
}, {
type: 'ytd',
text: 'YTD'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}]
},
title : {
text : 'Energy Consumption / Outdoor Temperature'
},
credits: {
enabled: false
},
xAxis: {
title: {
text: 'Date/time',
type: "datetime",
tickInterval : 3 * 3600 * 1000,
dateTimeLabelFormats: {
day: '%H'
},
}
},
yAxis:[{
labels: {
formatter: function() {
return this.value +'°C';
},
style: {
color: '#89A54E'
}
},
title: {
text: 'Outdoor temperature',
style: {
color: '#89A54E'
}
},
opposite: true
},{
gridLineWidth: 0,
title: {
text: 'Energy Consumption',
style: {
color: '#4572A7'
}
},
labels: {
formatter: function() {
return this.value +' °C';
},
style: {
color: '#4572A7'
}
}
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 80,
floating: true,
backgroundColor: '#FFFFFF'
},
scrollbar:{
enabled:false
},
navigator: {
enabled : false
},
plotOptions: {
column: {
pointRange: 24 * 3600 * 1000
}
},
series : [{
name : 'Energy Consumption',
id : 'EnergyConsumption_data',
yAxis: 1,
data : getData(),
pointInterval: 1 * 3600 * 1000
},{
name : 'OutDoor Temperature',
id : 'OutDoorTemperature_data',
data : secondData(),
pointInterval: 1 * 3600 * 1000
}
]
});
});
它适用于 1d。同样是当我单击 1w 按钮时，代码不适用于 1w 数据即将到来，但它不只渲染三个点而不是全部 7 个点。下面是我的代码的小提琴文件。
请任何人给我解决方案。提前致谢， 马希达