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

我刚开始学习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调用并将图表创建function放在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);