Question

我刚开始学习JQuery和Highcharts。我创建了一个带有静态数据的多Y轴高图。我希望能够将数据从java传递给系列数据。我该怎么做？如何使JQuery代码从我的java类中获取数据并将其加载到highcharts中。以下是我的代码：

// MultiY.js
$(document).ready(function() {


    chart1 = new Highcharts.Chart({
     chart: {
        renderTo: 'chart_1',
        height: 350,
     },
     title: {
        text: 'Sample Highcharts'
     },
     xAxis: {
        categories: ['4/28/2013', '4/29/2013', '4/30/2013', '5/1/2013', '5/2/2013', '5/3/2013', '5/4/2013']      
     },
     yAxis: [{
         opposite: true,
         title: {
             text: 'Cost',
             style: {
                 color: '#dbf400'
             }             
         },
         labels: {
             style: {
                 color: '#dbf400'
             }
         },plotOptions: {
            series: {
                pointWidth: 20
            }
        }
     },
     {
         lineWidth: 2,
         title: {
             text: 'Silver',
             style: {
                 color: '#89A54E'
             }
         },
         labels: {
             style: {
                 color: '#89A54E'
             }
         }
     }, {
         lineWidth: 2,
         opposite: true,
         title: {
             text: 'Gold',
             style: {
                 color: '#4572A7'
             }
         },
         labels: {
             style: {
                 color: '#4572A7'
             }
         }
     }, {
         lineWidth: 2,
         opposite: true,
         title: {
             text: 'Score',
             style: {
                 color: '#AA4643'
             }
         },
         labels: {
             style: {
                 color: '#AA4643'
             }
         }
     }],

     series: [ {
         name: 'Cost',
         type: 'column',
         color: '#dbf400',
         data: [65078.70, 70816.51, 71211.22, 56130.71, 67839.10, 59170.91, 52826.47] ,
         yAxis: 3
     }, {
         name: 'Silver',
         type: 'spline',
         color: '#89A54E',
         dashStyle: 'shortdot',
         data: [6357434, 7190915, 6737487, 6001323, 8628154, 7446175, 5953040]        
     }, {
         name: 'Gold',
         type: 'spline',
         color: '#4572A7',
         data: [2652304, 2862748, 2645867, 2506507, 2531869, 2352410, 2127584] ,
         yAxis: 1
     }, {
         name: 'Score',
         type: 'spline',
         color: '#AA4643',
         data: [57994, 68114, 64582, 26526, 52712, 55464, 46802] ,
         yAxis: 2
     }]
    });

});

我的Java函数返回：

trendingData.add(new TrendingDataObjects(silver, gold, score, cost, day));

Answer 1

这对我有用：在document.ready（）....之后进行ajax调用并将图表创建功能放在success函数中。这样，图表会在启动时加载数据。例： //一旦DOM（文档）加载完毕 $（document）.ready（function（）{

$.ajax({
    type: "GET",
    url: "url",
    dataType: 'json',
    success: function(data){


        var timeArray = data.time;
        var costArray = data.cost;


     // First chart initialization
        chart1 = new Highcharts.Chart({
         chart: {
            renderTo: 'chart_1',
            height: 350,
         },
         title: {
            text: 'Ozone Trending'
         },
         xAxis: {
           categories: timeArray,
           labels: {
               rotation: -45,
               align: 'right'
           }
         },
         yAxis: [{
             opposite: true,
             title: {
                 text: 'Cost'

             },
             labels: {
                 style: {
                     color: '#dbf400'
                 }
             },plotOptions: {
                series: {
                    pointWidth: 20
                }
            }
         }],

         series: [ {
             name: 'Cost',
             data: costArray,

         }]
        });


    }

});

}）;

Answer 2

看看http://wicked-charts.org。它是一个提供API的Java库，您可以使用该API为Highcharts创建包含所需数据的图表选项对象，如下所示：

Options options = new Options();
options.setChartOptions(
  new ChartOptions()
    .setRenderTo("chart_1")
    .setHeight(350));
// set all your other options, including axes and data points

一旦你拥有了满足你需求的Java对象，就可以将它传递给Wicket或JSD组件（如果你使用其中一个框架 - 请参阅项目主页获取howto）或者你可以直接创建JSON表示你的图表是这样的：

JsonRenderer renderer = new JsonRenderer();
String jsonString = renderer.toJson(options);

将系列数据从Java传递到Multi Y轴Highcharts

2 个答案: