Highcharts在StockChart上设置日期格式

时间:2014-08-25 19:07:33

标签: datetime highcharts format

我使用PHP和highcharts创建一些图表,其中一个是StockChart。

我无法在xAxis上设置日期。从服务器端(PHP)我以毫秒为单位传递时间段(我尝试使用其他格式)并且我想显示日期(例如YYYY-MM-DD HH:MM)。

我通过JSON收到系列数据,其中很小一部分是:

   [{... ,"time":[1409052660000,1409049060000,1409045460000, ...] }]

我可以显示图表,事情是xAxis而不是日期,它有每个日期条目的序列(00:00:00:50 00:00:00:100 00:00:00:150 “)......

知道我缺少什么或需要配置什么?

在客户端我配置了:

var options = {
                chart: {
                    renderTo: 'container',
                    type: 'line',
                    marginRight: 250,
                },

                rangeSelector: {
                    //selected: 1,
                     //inputEnabled: $('#container').width() > 280,
                    //inputDateFormat: '%Y-%m-%d',
                    enabled: true
                },

                title: {
                    text: 'title',
                    x: -20 //center
                },
                subtitle: {
                    text: '',
                    x: -20
                },
                xAxis: {
                    type: 'datetime',
                    //tickPixelInterval: 50,

                    dateTimeLabelFormats: {
                        millisecond: '%Y-%M-%D:%H'
                    }, 
                    labels: {
                     rotation: -45,
                    },
                    rangeSelector : {
                        //selected : 1,
                        //inputEnabled: $('#container').width() > 480
                        //enabled:true,

                    },
                    categories: []
                },
                yAxis: [{ // Primary yAxis
                    labels: {
                    rotation: 0,
                    format: '{value}',
                    style: {
                        color: Highcharts.getOptions().colors[2]
                    },
                },
               title: {
                    text: '#',
                    style: {
                        color: Highcharts.getOptions().colors[2]
                    }
            },


        }, { // Secondary yAxis
            gridLineWidth: 0,
            min: 0, max: 100,
             labels: {
                format: '{value} %',
                dashStyle: 'shortdot',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            },
            title: {
                text: '%',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            },
             opposite: true
         }],
                tooltip: {
                    formatter: function() {
                            return '<b>'+ this.series.name +'</b><br/>'+
                            this.x +': '+ this.y;
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'top',
                    x: -10,
                    y: 100,
                    borderWidth: 0
                },
                series: []
            }

  $.getJSON("query2.php",{cli: client_name}, function(json) {

            options.title.text = client_name;
            options.xAxis.categories = json[0]['time'];
            options.xAxis.type = 'datetime';
            //options.xAxis.rotation = -45;

// ...

}

0 个答案:

没有答案