highcharts - Highcharts：使用 json 数据创建简单的折线图

Question

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

以这种格式

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

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

Answer 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);
            });

        };

Answer 2

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

点 = { x: 137.... , y: -2.0.... } poin2 ... 等等..

数组 = [点，点 2，...]

系列：数组

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

希望有帮助

Answer 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]
        ]
    }]

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