0

我刚刚开始学习 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));
4

2 回答 2

1

这对我有用：在 document.ready() .... 之后进行 ajax 调用并将图表创建功能放在成功函数中。这样，图表将在启动时加载数据。示例： // 一旦 DOM (document) 完成加载 $(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,

         }]
        });


    }

});

});

于 2013-06-27T09:32:06.883 回答
0

看看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 组件（如果您使用这些框架之一 - 请参阅项目主页以获取操作方法），或者您可以直接创建图表的 JSON 表示像这样：

JsonRenderer renderer = new JsonRenderer();
String jsonString = renderer.toJson(options);
于 2013-06-25T20:53:09.210 回答