1

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

2 回答 2

1

不幸的是，您不能以您指定的方式直接在 x、y 位置绘制数据点。当您调用时series.setData(data)，数据必须采用以下三种形式之一：

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

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

于 2011-03-07T17:19:53.297 回答
0

这与@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 中。

于 2012-05-31T13:47:39.017 回答