высокие чарты через json как получить xAxis?

Question

Я работаю над графиком веса. Я получаю данные для диаграммы через JSON, но проблема в том, что у меня нет данных для xAxis, только для даты. Вот пример данных, которые я получаю:

[
    {"Date":"2011-03-02","y":"180"},
    {"Date":"2011-03-03","y":"250"},
    {"Date":"2011-03-09","y":"185"},
    {"Date":"2011-03-03","y":"300"}
]

Вот как я получаю данные и отображаю диаграмму:

<script type="text/javascript">
    var chart;

    function requestData() {
        $.getJSON('<?php echo Dispatcher::baseUrl();?>/logs/feed_data', 
            function (data) {
                var series = chart.series[0];
                series.setData(data);
            }
        );
    }

    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'contain',
                defaultSeriesType: 'line',
                marginRight: 130,
                marginBottom: 25,
                events: { load: requestData }
            },
            title: {
                text: 'Your Weight History',
                x: -20 //center
            },
            subtitle: {
                text: 'Source: Fitness',
                x: -20
            },
            xAxis: {
                categories: []
            },
            yAxis: {
                title: {
                text: '-weight -Pounds '
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            formatter: function() {
                return '<b>'+ this.series.name +'</b><br/>'+
                this.x +': '+ this.y +' -Pounds';
            }
        },
        legend: {
            layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -10,
                y: 100,
                borderWidth: 0
            },
            series: [{
                name: 'Data1',
                data: []
            }]
        });
    }); 
</script>

Answer 1

К сожалению, вы не можете напрямую нарисовать точку данных в точке x, y указанным способом.Когда вы вызываете series.setData(data), данные должны быть в одной из трех форм :

• Массив значений y (например, data = [0,1,2,3])
• Anмассив объектов массива вида [x, y] (например, [[0,0], [1,1], [2,2]])
• массив точечных объектов

Чтобы сделать то, что вы хотите сделать,вам нужно будет либо использовать pointStart и pointInterval, как описано в серии plotOptions , либо переводить даты в целые числа (миллисекунды) и устанавливать тип оси x в значение «datetime».

Answer 2

Это похоже на ответ @ NT3RP, но здесь - это пример того, как вы можете проанализировать и отсортировать данные, чтобы сделать их пригодными для Highcharts:

function requestData() {
    var chart = this;
     $.getJSON('<?php echo Dispatcher::baseUrl();?>/logs/feed_data', 
            function (data) {
                 var series = chart.series[0];
                 var procData = $.map(data, function(item){
                     return [[Date.parse(item.Date), parseInt(item.y, 10)]];          
                 });
                 procData.sort(function(a, b){
                     return a[0] - b[0];            
                 });
                 series.setData(procData);
      });
}

$(document).ready(function() {
    new Highcharts.Chart({
        chart: {
            renderTo: 'contain',
            defaultSeriesType: 'line',
            marginRight: 130,
            marginBottom: 25,
            events: { load: requestData }
        },
        title: {
            text: 'Your Weight History',
            x: -20 //center
        },
        subtitle: {
            text: 'Source: Fitness',
            x: -20
        },
        xAxis: {
            type: 'datetime'
        },
        yAxis: {
            title: {
            text: '-weight -Pounds '
        },
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }]
    },
    tooltip: {
        formatter: function() {
            return '<b>'+ this.series.name +'</b><br/>'+
            this.x +': '+ this.y +' -Pounds';
        }
    },
    legend: {
        layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -10,
            y: 100,
            borderWidth: 0
        },
        series: [{
            name: 'Data1',
            data: []
        }]
    });
}); ​

Возможно, вы захотите использовать Highcharts.numberFormatter для форматирования дат во всплывающей подсказке, но я не включил это в jsfiddle.