Question

我正在制作股票图表，我必须显示三种货币的股票数据。我能够看到与之对应的图表和汇率，但x轴上的日期不正确。我的json回答是这样的。

[{"rate":1.3349,"month":"1422403200000"},{"rate":1.3415,"month":"1422316800000"},{"rate":1.3394,"month":"1422230400000"},{"rate":1.3202,"month":"1421971200000"},{"rate":1.304,"month":"1421884800000"},{"rate":1.3109,"month":"1421798400000"},{"rate":1.3017,"month":"1421712000000"},{"rate":1.3114,"month":"1421625600000"},{"rate":1.305,"month":"1421366400000"},{"rate":1.292,"month":"1421280000000"},{"rate":1.2876,"month":"1421193600000"},{"rate":1.2819,"month":"1421107200000"},{"rate":1.2801,"month":"1421020800000"}]

它只是json响应的一个例子。在我的java中，vo是双重类型，月份是String类型。

我的js代码在这里

function drawChart(){

    var seriesOptions = [],
        seriesCounter = 0,
        names = ['EURGBP', 'EURJPY', 'EURCHF'],
        // create the chart when all data is loaded
        createChart = function () {

            $('#drawchart').highcharts('StockChart', {

                rangeSelector: {
                    selected: 4
                },

                yAxis: {
                    labels: {
                        formatter: function () {
                            return (this.value > 0 ? ' + ' : '') + this.value + '%';
                        }
                    },
                    plotLines: [{
                        value: 0,
                        width: 2,
                        color: 'silver'
                    }]
                },

                plotOptions: {
                    series: {
                        compare: 'percent'
                    }
                },

                tooltip: {
                    pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
                    valueDecimals: 2
                },

                series: seriesOptions
            });
        };

    $.each(names, function (i, name) {

        $.getJSON('/bin/drawChart,    function (data) {
            var dataArray = new Array;
 $.each(data, function (i, obj) {
   dataArray.push([obj.month,obj.rate]);
  });
            alert(dataArray);
            seriesOptions[i] = {
                name: name,
                data: dataArray,
                 tooltip: {
                    valueDecimals: 2
              }
            };

            // As we're loading the data asynchronously, we don't know what order it will arrive. So
            // we keep a counter and create the chart when all the data is loaded.
            seriesCounter += 1;

            if (seriesCounter === names.length) {
                createChart();
            }
        });
    });

}

为什么日期在x轴上没有正确显示

Answer 1

问题是你的JSON应该是字段x和y。更多的值应该是数字而不是字符串。因此，您应该在后端准备正确的JSON结构，或者在加载后解析它。

Answer 2

绘制图表方法

中缺少您的X轴信息

高库存图表中的日期无法在x轴上正确显示

2 个答案: