Highcharts：使用 json 数据创建简单的折线图答案

【问题标题】：Highcharts: create a simple line graph with json dataHighcharts：使用 json 数据创建简单的折线图
【发布时间】：2013-07-06 15:36:06
【问题描述】：

我是 Highcharts 新手，我想创建一个简单的折线图，其中 x 轴为日期时间，y 轴为数字。数据将以 json 格式来自 RESTful 端点

这种格式

{"lineChartData":[{"date":"1373169600000","roi":"-2.001282"},{"date":"1373083200000","roi":"-3.001282"}]}

我已经以毫秒为单位转换了日期。我正在寻找解决方案或类似示例来完成此操作。

【问题讨论】：

标签： highcharts

【解决方案1】：

对我有用的解决方案是遍历 json 数据以创建与 Highcharts 兼容的格式：

 function requestData(event) {
            var chartData=[];
            $.getJSON("rest/portfolio/rois", function(data) {
                $.each(data.lineChartData, function(key, val) {
                    chartData.push([parseFloat(val.date),parseFloat(val.roi)]);

                  });
                chart.series[0].setData(chartData);
            });

        };

【讨论】：

【解决方案2】：

您的情况的一个解决方案是循环遍历您的 json 数据并创建点并将它们添加到数组中。每个点都必须使用其 X 和 Y 属性进行设置，例如：

point = { x: 137.... , y: -2.0..... } poin2 ... 以此类推..

数组 = [point, point2, ... ]

系列：数组

你可以在http://api.highcharts.com/highcharts#series.data找到更多信息

希望有帮助

【讨论】：

谢谢，我自己找到了与您推荐的非常接近的解决方案。

【解决方案3】：

我认为您正在寻找我之前在不同问题中回答的这个

您可以尝试使用此代码以 12 小时时间格式制作 x 轴

xAxis: {
    title: {
        enabled: true,
        text: 'Hours of the Day'
    },
    type: 'datetime',

    dateTimeLabelFormats : {
        hour: '%I %p',
        minute: '%I:%M %p'
    }
},

对于“工具提示”也可以试试这个：

tooltip: {
    formatter: function() {
        return ''+
                "" +
                'Time: '+ Highcharts.dateFormat('%I:%M %p', this.x);
    }
},

当然系列是：

series: [{
        data: [
            [Date.UTC(2013, 3, 22, 1, 15), 12.7], 
            [Date.UTC(2012, 3, 24, 3, 20), 13.5],  //put your data array here
            [Date.UTC(2012, 2, 22, 2, 25), 18.8]
        ]
    }]

希望它能解决您的问题。谢谢。

【讨论】：