将Java中的系列数据传递给Y轴Highcharts

Question

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

// 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调用，并将图表创建功能放入成功函数中。这样，图表将在启动时加载数据。例如： //一旦DOM（文档）完成加载 $（文件）。就绪（函数（）{

$.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。这是一个Java库，提供与您可以创建一个图表选项为你想要的任何数据，像这样Highcharts对象的API：

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);