JSON來谷歌圖表的dataTable JQuery的

我有一個JSON格式JSON來谷歌圖表的dataTable JQuery的

"returns":[{ 
    "apr": 0.779, 
    "aug": 0.000, 
    "dec": 0.000, 
    "feb": 1.524, 
    "jan": -0.570, 
    "jul": 0.329, 
    "jun": 0.000, 
    "mar": 1.460, 
    "may": 0.000, 
    "nov": 0.000, 
    "oct": 0.000, 
    "ret": 3.557, 
    "sep": 0.000, 
    "vol": 2.649, 
    "year": 2017 
}, { 
    "apr": 0.000, 
    "aug": 0.974, 
    "dec": -0.149, 
    "feb": 0.000, 
    "jan": 0.000, 
    "jul": 0.236, 
    "jun": 0.000, 
    "mar": 0.000, 
    "may": 0.000, 
    "nov": 0.000, 
    "oct": 0.898, 
    "ret": 1.488, 
    "sep": -0.471, 
    "vol": 1.428, 
    "year": 2016 
}]

現在我想在谷歌的折線圖

任何一個可以幫助我在谷歌折線圖顯示顯示的記錄？

Expecting Google Line chart like this

來源

2017-07-18 Santhosh S.

是的，你是正確的WhiteHat，我希望有一個線，每年除「RET」和「體積」（不必擔心它）沒有必要顯示。否我想顯示「文本」而不是「數字」 –

由於您想要每年都有一行，因此您需要將每年的數據放在單獨的列中。所以使用arrayToDataTable [['''''''2017'，'year2016']，['apr'，0.779,0.0]，['aug'，0，0.974]，...]但是你可能會想排序幾個月不是按字母順序排列，而是按正確的順序。 – dlaliberte

我已經聲明瞭一些需要的變量。這裏的「回報」是這是我遇到的JSON數據（在上述問題給出樣本）

// var returns ===> JSON data 
    var dataLength=null; 
    var keyCount=null; 
    var month=["jan","feb","mar","apr","may","jun","jul","aug","sep","oct","nov","dec"];

從我JSON獲取詳細資料，如下面..

if(returns.length>0){ 
     dataLength=returns.length;/// Get Total number of Records ==> returns 
     keyCount=Object.keys(returns[0]).length;/// Get Total number of key values having each object inside "returns" 
    }

添加列到數據表..

const data = new google.visualization.DataTable();  
data.addColumn('string', 'Mois'); 
    for(var i=0;i<dataLength;i++){ 
     data.addColumn('number',returns[i]["year"]); /// Adding each year as Column into Datatable 
    }

而且我創建的臨時陣列將數據添加到數據表中的「數據」

for(var a=0;a<month.length;a++){ // Loop to iterate to get all MONTH values 
     var arr = []; /// Declaring Empty array 
     arr.push(month_Fr[a]);/// Push Month name (French) into Array 
     for(var b=0;b<dataLength;b++){ /// Loop to iterate to get all YEAR values 
      monthValue=returns[b][month[a]]; /// Get value of each row object 
      arr.push(monthValue); /// Push object value into Array 
     } 
     data.addRow(arr); // Adding Row into Datatable 
    }

創建圖表元素

const chartOptions = { 
     chart: { 
     title: 'Performance' 
     }, 
     curveType: 'function', 
     width: 900, 
     height: 500 
    }; 
    const chart = new google.charts.Line($('#chart')[0]); 
    chart.draw(data, chartOptions);

最後我的折線圖::點擊下面的鏈接。

Line chart from JSON Data

來源

2017-07-26 13:14:33

我需要在法語中顯示月份，所以我添加了名爲month_Fr的數組，並從數組中獲得月份名稱法語'var month_Fr = [「Jan」，「Fev」，「Mar」，「Avr」，「Mai」瑞」，「JUIL」，「AOU」，「月」，「月」，「月」，「月」];' –

JSON來谷歌圖表的dataTable JQuery的

回答

相關問題