Question

我正在使用Highcharts绘制JSON数据。日期采用字符串格式。

JSON数据：

[{"BRENT_SPOT":70.88,"TRADE_DATE":"31-JUL-2009"},{"BRENT_SPOT":73.28,"TRADE_DATE":"03-AUG-2009"},{"BRENT_SPOT":74.31,"TRADE_DATE":"04-AUG-2009"},{"BRENT_SPOT":74.96,"TRADE_DATE":"05-AUG-2009"},{"BRENT_SPOT":74.4,"TRADE_DATE":"06-AUG-2009"},{"BRENT_SPOT":72.84,"TRADE_DATE":"07-AUG-2009"},{"BRENT_SPOT":73.29,"TRADE_DATE":"10-AUG-2009"},{"BRENT_SPOT":72.04,"TRADE_DATE":"11-AUG-2009"}]

HighCharts / JQuery代码：

<script>
  var chart;
    $(function() {
       var options = {
            chart: {
                renderTo: 'container',
                zoomType: 'xy',
                type: 'line'
            },
            title: {
                text: 'Brent Daily Price Curve (FPC as at <cfoutput>#f_date#</cfoutput>)'
            },
            xAxis: {
                labels: {
                    rotation: 45,
                    step: 3
                },
                type: 'category'
            },
            yAxis: {
                lineWidth: 1,
                title: {
                    text: '$ USD'
                },
                min: 0
            },
            series: []
        };
       $.getJSON("brentpricehc_test.cfm?f_date=<cfoutput>#f_date#</cfoutput>", {}, function(jsonResult) {

        var BrentUSDPrice = {
                            name: "Brent Spot (USD)",
                            type: "line",
                            data: [],
                            marker: {
                                       radius: 2
                                    }
                    };

            $(jsonResult).each(function(index) {
                            BrentUSDPrice.data.push([this.TRADE_DATE, this.BRENT_SPOT]);
                    });

            /*options.series[0] = BrentUSDPrice;*/
            options.series.push(BrentUSDPrice);
            chart = new Highcharts.Chart(options);
       });
  });
  </script>

我无法在每个日期字符串中绘制任何值。我尝试将JSON日期转换为日期时间，但仍然是同样的问题。

少数细节（用于测试目的）：修改到下面的行可以使用正确的“brent_spot”值绘制图形。这意味着问题在于“trade_dates”“不是”绘图的方式。

BrentUSDPrice.data.push([index, this.BRENT_SPOT]);

编辑2 :(使用Datetime类型使代码有效）

JSON数据（新）：以TO_CHAR（TRADE_DATE，'YYYY / MM / DD'）的形式返回

[{"BRENT_SPOT":70.88,"TRADE_DATE":"2009\/07\/31"},{"BRENT_SPOT":73.28,"TRADE_DATE":"2009\/08\/03"},{"BRENT_SPOT":74.31,"TRADE_DATE":"2009\/08\/04"},{"BRENT_SPOT":74.96,"TRADE_DATE":"2009\/08\/05"},{"BRENT_SPOT":74.4,"TRADE_DATE":"2009\/08\/06"},{"BRENT_SPOT":72.84,"TRADE_DATE":"2009\/08\/07"},{"BRENT_SPOT":73.29,"TRADE_DATE":"2009\/08\/10"},{"BRENT_SPOT":72.04,"TRADE_DATE":"2009\/08\/11"}]

$(jsonResult).each(function(index) {
                            BrentUSDPrice.data.push([new Date(this.TRADE_DATE), this.BRENT_SPOT]);
                    });

使用的服务器端语言：Coldfusion

数据库：Oracle

我在某处做些傻事吗？

Answer 1

我刚刚尝试过你的代码，它运行得很好，请参阅：http://jsfiddle.net/3bQne/1026/

我想，您需要更新到Highcharts 3.0.10才能使其正常运行。

Answer 2

如果您使用type: 'category'，则需要将name:分配给数据点。请参阅http://api.highcharts.com/highcharts#xAxis

上的categories条目

如果xAxis存在类别，则使用名称而不是该轴的数字。从Highcharts 3.0开始，也可以通过为每个点命名并将轴类型设置为＆＃34;类别＆＃34;来提取类别。

所以问题是你是否使用Highcharts 3.0，如果你这样做，它需要看起来像这样：

data: [{
    name: 'Point 1',
    color: '#00FF00',
    y: 0
}, {
    name: 'Point 2',
    color: '#FF00FF',
    y: 5
}]

请参阅：http://api.highcharts.com/highcharts#series.data

Highcharts不将日期字符串绘制为类别

2 个答案: