Highcharts未正确显示图表/未正确读取数组

时间:2014-07-11 11:31:35

标签: java arraylist highcharts

我正在从数据库中读取一些信息并将其放入arraylist中以便高级图表能够阅读。 Arraylist的形式为[String,int],它代表用户的日期/数量。看起来像这样

[[2014-06-25, 35], [2014-06-26, 48], [2014-06-27, 60], [2014-06-28, 14], [2014-06-29, 8], [2014-06-30, 26], [2014-07-01, 21], [2014-07-02, 32], [2014-07-03, 33], [2014-07-04, 17], [2014-07-05, 18], [2014-07-06, 14], [2014-07-07, 26], [2014-07-08, 18], [2014-07-09, 26], [2014-07-10, 21], [2014-07-11, 1]]

我必须将其提供给我的高图,看起来像这样:

    $(function () {
    $('#container').highcharts({
        title: {
            text: 'Monthly Average Users',
            x: -20 //center
        },
        subtitle: {
            text: 'subtitle',
        x: -20
        },
        xAxis: {
            type: 'category'
    },
    yAxis: {
        title: {
            text: 'Number of users'
        },
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }]
    },
    tooltip: {
        valueSuffix: '°C'
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle',
        borderWidth: 0
    },
    series: [{
        name: 'Users',
        data: '<%=combined%>'
    }]
});

但它就是这样的 result

我正在尝试在jsp文件中执行此操作,highcharts是否可以读取java ArrayLists?

由于

2 个答案:

答案 0 :(得分:0)

更改

xAxis: {
                type: 'category',

xAxis: {
                type: 'datetime',

还有一件事 - 日期格式应该是这样的 - [Date.UTC(2014,06,25), 35] - 按原样运行它以获得想法..

http://jsfiddle.net/8jwHV/4/

$(function () {
$('#container').highcharts({
    title: {
        text: 'Monthly Average Users',
        x: -20 //center
    },
    subtitle: {
        text: 'subtitle',
    x: -20
    },
    xAxis: {
        type: 'datetime'
},
yAxis: {
    title: {
        text: 'Number of users'
    },
    plotLines: [{
        value: 0,
        width: 1,
        color: '#808080'
    }]
},
tooltip: {
    valueSuffix: '°C'
},
legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'middle',
    borderWidth: 0
},
series: [{
    name: 'Users',
            data: [
                [Date.UTC(2014,06,25), 35], 
                [Date.UTC(2014,06,26), 40], 
                [Date.UTC(2014,06,27), 41], 
                [Date.UTC(2014,06,28), 80], 

            ]
        }, ]
    });
});

答案 1 :(得分:0)

xAxis: {
       type: 'datetime',
       tickInterval: 50
}