將Java中的系列數據傳遞給Y軸Highcharts

我剛開始學習JQuery和Highcharts。我用靜態數據創建了一個多Y軸高分佈圖。我想能夠將數據從java傳遞到系列數據。我該怎麼做？我如何讓JQuery代碼從我的java類中獲取數據並將其加載到高圖中。以下是我的代碼：將Java中的系列數據傳遞給Y軸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));

來源

2013-06-25 Praveen

我想你可能會這樣做：1）使用AJAX，從jQuery可能是get（）或getJSON（）。我建議使用第二。 2）在您的Java類添加庫導出到JSON，並編碼爲該格式。 3）將AJAX請求連接到將返回該JSON的URL。 4）要添加新系列，請使用[chart.addSeries]（http://api.highcharts.com/highcharts#Chart.addSeries（））或爲現有系列設置新數據[chart.series.setData]（http： //api.highcharts.com/highcharts#Series.setData（）） –

我跟隨你的建議。我寫了一個ajax函數並獲得了json數據。我嘗試使用以下方法創建系列數據： 'success：function（data）{ \t chart.xAxis [0] .setCategories（data.timestamp）; ） \t chart.addSeries（{「Cost」， data：data.cost \t}）;' 但現在圖表不加載:( – Praveen

data.timestamp應該是一個字符串數組（例如：[['a'，'b'，'c']'），data.cost應該是一個點數組（例如：'[123,145,156]'）。你確定這是你的JSON格式的數據嗎？你可以顯示你的JSON數據樣本嗎？ –

這爲我工作：在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, 

     }] 
     }); 


    } 

});

}）;

來源

2013-06-27 09:32:06 Praveen

因此，它的工作原理是什麼？格拉茨！ –

感謝您的輸入Pawel – Praveen

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

來源

2013-06-25 20:53:09 Tom

wicket在做什麼，我已經在我的multiy.js中完成了。就像創建軸和系列一樣。我只是想從java類中獲取系列數據。我真的沒有看到在這裏使用檢票口的優勢。我想更像是從multiy.js調用java函數，並將數據分配給獲取的數據。 – Praveen

好的，現在我有你的問題。你想從你的jQuery代碼調用服務器上的Java函數，對吧？在這種情況下，您需要一些可以通過HTTP訪問的服務器端Java Web應用程序，例如使用jquery ajax（http://api.jquery.com/jQuery.ajax/）來調用它。您可以使用Java框架（如JSP，JSF，Wicket或Spring MVC）構建的Java Web應用程序，例如... – Tom

將Java中的系列數據傳遞給Y軸Highcharts

回答

相關問題