Highcharts时间序列未正确绘制

时间:2016-10-26 11:51:12

标签: highcharts

尝试从支持bean获取数据到Highchart折线图。 问题是,我需要一个具有日期时间格式的时间序列,但Java无法创建JS日期对象。即使使用毫秒,图表也不会显示日期。

支持bean的示例代码:

final List<LineChartSeries> series = new ArrayList<>();
final LineChartSeries chartSerie = new LineChartSeries();
final SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");

LineSeries2 lineSeries = new LineSeries2();
lineSeries.setY(0.654);
lineSeries.setDate(sdf.parse("2016-01-01").getTime());
chartSerie.addData(lineSeries);

lineSeries = new LineSeries2();
lineSeries.setY(0.337);
lineSeries.setDate(sdf.parse("2016-02-01").getTime());
chartSerie.addData(lineSeries);

lineSeries = new LineSeries2();
lineSeries.setY(0.547);
lineSeries.setDate(sdf.parse("2016-03-01").getTime());
chartSerie.addData(lineSeries);

series.add(chartSerie);

chartData = new Gson().toJson(series);

生成类似

的JSON
[{"data":[{"date":1451602800000,"y":0.654},{"date":1454281200000,"y":0.337},{"date":1456786800000,"y":0.547}]}]

我的JSF页面与Highchart(部分)

<script type="text/javascript">
        $(function () {
            $('#ctrContainer').highcharts({
                chart : {
                    zoomType: 'x'
                },
                title : {
                    text : 'VTR'
                },
                xAxis: {
                    type: 'datetime'
                },
                yAxis: {
                    title: {
                      text: 'Exchange rate'
                   }
               },
               legend: {
                   enabled: false
               },
               plotOptions: {
                   area: {
                        fillColor: {
                            linearGradient: {
                                x1: 0,
                                y1: 0,
                                x2: 0,
                                y2: 1
                           },
                           stops: [
                                        [0, Highcharts.getOptions().colors[0]],
                                        [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                                    ]
                                },
                                marker: {
                                    radius: 2
                                },
                                lineWidth: 1,
                                states: {
                                    hover: {
                                        lineWidth: 1
                                    }
                                },
                                threshold: null
                            }
                        },
                        credits: {
                            enabled: false
                        },
                        series : $.parseJSON('#{lineChartController.chartData}')
                    });

将正确绘制y轴的数据,但未正确解释“日期”数据。任何建议?

0 个答案:

没有答案