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)时，数据必须位于one of three forms：

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

要执行您想要执行的操作，您需要使用系列plotOptions中所述的pointStart和pointInterval，或将日期转换为整数（毫秒）和将x轴类型设置为'datetime'。

Answer 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中包含该日期。

通过json的highcharts如何获得xAxis？

2 个答案: