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属性设置每个点，例如：

point = {x：137 ....，y：-2.0 .....} poin2 ......等等..

array = [point，point2，...]

系列：数组

您可以在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]
        ]
    }]

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

Highcharts：使用json数据创建一个简单的折线图

3 个答案: