Passing series data from Java to Multi Y axis Highcharts

问题

I have just started learning JQuery and Highcharts. I created a multi Y-axis highchart with static data. I wanna be able to pass data from java to the series data. How do i do it? How do i make the JQuery code to fetch data from my java class and load it into the highcharts. The following is my code:

// 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
     }]
    });

});

My Java function returns:

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

回答1:

This worked for me: After the document.ready() .... make the ajax call and put the chart creation functionality within the success function. That way the chart would load with the data while initiation. Example: // Once DOM (document) is finished loading $(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,

         }]
        });


    }

});

});

回答2:

Have a look at http://wicked-charts.org. It's a Java library providing an API with which you can create a chart options object for Highcharts with any data you want, something like this:

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

Once you have that Java object that suits your needs, you can either pass it to a Wicket or JSD component (if you use one of these frameworks - see the project homepage for a howto) or you can directly create the JSON representation of your chart like this:

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

来源：https://stackoverflow.com/questions/17299828/passing-series-data-from-java-to-multi-y-axis-highcharts