Google Chart - 作爲圖例字段的JSON數據源項 - 堆積列

我想創建一個帶有JSON數據源的堆積列圖，並使用我的JSON數據中的項目作爲字段進行分組。我還沒有找到任何資源如何做到這一點，我沒有JS經驗。Google Chart - 作爲圖例字段的JSON數據源項 - 堆積列

我知道如何加入多個數據源，如果你知道你將分組的領域。但在這種情況下，客戶端字段是動態的。

這堆問題是類似於我要完成：JSON format for Google chart stacked column

我的數據來自於像下面這樣：

[["2017/06/25", "Some Client A", 805.0], ["2017/07/02", "Some Client B", 955.0], ["2017/07/09", "Some Client C", 805.0]]

到目前爲止，我有以下。這顯然是行不通的：

function drawStacked() { 
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Week'); 
    data.addColumn('string', 'client'); 
    data.addColumn('number', 'Hours'); 
    data.addRows({{ sbl1|safe }});

來源

2017-06-21 Matt

請參閱[本答案]中的__EDIT__（https://stackoverflow.com/a/40367600/5090771）... – WhiteHat

@WhiteHat感謝您的回覆。現在我需要弄清楚如何將數據序列化爲該格式。 – Matt

在帖子中顯示的數據能很好地工作，從對方的回答代碼，
看到下面的工作片段...

google.charts.load('current', { 
 
    callback: function() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('string', 'Week'); 
 
    data.addColumn('string', 'client'); 
 
    data.addColumn('number', 'Hours'); 
 
    data.addRows([["2017/07/09", "Some Client A", 805.0], ["2017/07/09", "Some Client B", 955.0], ["2017/07/09", "Some Client C", 805.0]]); 
 
    
 
    // create data view 
 
    var view = new google.visualization.DataView(data); 
 

 
    // init column arrays 
 
    var aggColumns = []; 
 
    var viewColumns = [{ 
 
     calc: function (dt, row) { 
 
     return dt.getFormattedValue(row, 0); 
 
     }, 
 
     label: data.getColumnLabel(0), 
 
     type: 'string' 
 
    }]; 
 

 
    // build view & agg column for each client 
 
    data.getDistinctValues(1).forEach(function (client, index) { 
 
     // add view column 
 
     viewColumns.push({ 
 
     calc: function (dt, row) { 
 
      if (dt.getValue(row, 1) === client) { 
 
      return dt.getValue(row, 2); 
 
      } 
 
      return null; 
 
     }, 
 
     label: client, 
 
     type: 'number' 
 
     }); 
 

 
     // add agg column 
 
     aggColumns.push({ 
 
     aggregation: google.visualization.data.sum, 
 
     column: index + 1, 
 
     label: client, 
 
     type: 'number' 
 
     }); 
 
    }); 
 

 
    // set view columns 
 
    view.setColumns(viewColumns); 
 

 
    // agg view by first column 
 
    var group = google.visualization.data.group(
 
     view, 
 
     [0], 
 
     aggColumns 
 
    ); 
 

 
    // draw chart 
 
    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); 
 
    chart.draw(group, { 
 
     isStacked: true 
 
    }); 
 
    }, 
 
    packages: ['corechart'] 
 
});

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>

來源

2017-06-22 12:56:58 WhiteHat

WhiteHat，這對我來說很重要。非常感謝。 – Matt

我拿出'formatYear'線，從其他答案剩下的... – WhiteHat

Google Chart - 作爲圖例字段的JSON數據源項 - 堆積列

回答

相關問題