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

Highcharts not plotting Date string as Category

本文关键字：绘制 字符串 日期 Highcharts      更新时间：2023-09-26

我使用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"}]
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日期转换为datetime，但仍然存在相同的问题。

更多细节(用于测试目的):修改到下面一行，用正确的"brent_spot"值绘制图形。这意味着问题在于"trade_dates"的方式"没有"绘图。

BrentUSDPrice.data.push([index, this.BRENT_SPOT]);
编辑2:(使用Datetime类型使代码工作)

JSON Data (New):返回TO_CHAR(TRADE_DATE， '年月日')

[{"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

我是不是做了什么傻事?

我刚刚尝试了您的代码，它工作得非常好，参见:http://jsfiddle.net/3bQne/1026/

我猜，你需要更新到Highcharts 3.0.10才能让这个工作。

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

的categories条目。

如果在x轴上有类别，则在该轴上使用名称而不是数字。从Highcharts 3.0开始，类别也可以通过给每个点一个名字和设置轴类型为"category"来提取。

所以问题是你是否在使用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

相关文章：