highstock设置动态x轴标签

Question

我有像自定义范围选择器这样的要求，如1d | 1w | 1m | 3m | 6m |当我点击任何rangeselector按钮需要更改x轴标签（datetime）。如果我点击1d我想要每小时基础像00.00,01.00,02.00 ...... II点击1w x轴标签是jan-1 ，jan-2，jan-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个点。 下面是我的代码的小提琴文件。

http://jsfiddle.net/t6uYV/

请任何人给我解决方案。 提前致谢， Mahidhar

Answer 1

您可以使用tickPositioner来定义动态tickIntervals。

http://api.highcharts.com/highstock#xAxis.tickPositioner