通过json的highcharts如何获取xAxis？答案

【问题标题】：highcharts via json how to get the xAxis?通过json的highcharts如何获取xAxis？
【发布时间】：2011-03-03 15:24:46
【问题描述】：

我正在制作体重图表。我通过 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>

【问题讨论】：

有没有你炫耀的例子
你的 json 应该是一个数组。据我所知，时间和日期有特定的格式。它应该在某个日期时间之后以毫秒为单位。所以我建议让你的 json 格式适合 highcharts。

标签： jquery json highcharts

【解决方案1】：

很遗憾，您无法按照您指定的方式直接在 x、y 位置绘制数据点。当你调用series.setData(data)时，数据必须在one of three forms：

y 值数组（例如data = [0,1,2,3]）
[x, y] 形式的数组对象数组（例如[[0,0], [1,1], [2,2]]）
Point objects 的数组

要做你想做的事，你要么需要使用pointStart 和pointInterval，如系列plotOptions 中所述，或者将你的日期转换为整数（毫秒）并设置x轴类型到“日期时间”。

【讨论】：

【解决方案2】：

这与@NT3RP 的回答类似，但here 是您如何解析和排序数据以使其适合 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 中包含它。

【讨论】：