java - 将系列数据从 Java 传递到多 Y 轴 Highcharts

Question

我刚刚开始学习 JQuery 和 Highcharts。我使用静态数据创建了一个多 Y 轴 Highcharts 。我希望能够将数据从 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(文档)完成加载$(文档).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,

         }]
        });


    }

});

});