Question

我有JSON格式的记录

"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
}]

现在我想在Google Line图表中显示

任何人都可以帮我在Google Line Chart中显示吗？

Expecting Google Line chart like this

Answer 1

我已经声明了一些需要的变量。这里“返回”是我正在使用的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"
    }

将列添加到DataTable ..

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
    }

我创建了临时数组，将数据添加到DataTable“data”

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

Json到Google图表dataTable JQuery

1 个答案: