顯示堆積欄中的百分比谷歌圖表

Question

// Display google stacked bar chart 
var view = new google.visualization.DataView(data); 
view.setColumns([0, 1, { 
    calc: "stringify", 
    sourceColumn: 1, 
    type: "string", 
role: "annotation" 
}, 
2]); 

以下是我的堆疊圖片bar chart。

我不能夠顯示綠色地址欄上，但不是紅欄上的百分比。 綠色欄中的當前值不是百分比值。

Answer 1

需要爲每個系列的註釋列...

var view = new google.visualization.DataView(data); 
view.setColumns([0, 
    // series 0 
    1, { 
    calc: "stringify", 
    sourceColumn: 1, 
    type: "string", 
    role: "annotation" 
    }, 
    // series 1 
    2, { 
    calc: "stringify", 
    sourceColumn: 2, 
    type: "string", 
    role: "annotation" 
    } 
]); 

編輯

的註釋值格式化爲百分比

用自定義函數替換"stringify"功能

使用NumberFormat formatter來格式化值

看到下面的工作片段...

google.charts.load('current', { 
 
    callback: drawSeriesChart, 
 
    packages: ['corechart'] 
 
}); 
 

 
function drawSeriesChart() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('string', 'Month'); 
 
    data.addColumn('number', 'Category A'); 
 
    data.addColumn('number', 'Category B'); 
 
    data.addRows([ 
 
    ['Sep', 100, 190], 
 
    ['Oct', 220, 178] 
 
    ]); 
 

 
    var formatPercent = new google.visualization.NumberFormat({ 
 
    pattern: '#,##0.0%' 
 
    }); 
 
    
 
    var view = new google.visualization.DataView(data); 
 
    view.setColumns([0, 
 
    // series 0 
 
    1, { 
 
     calc: function (dt, row) { 
 
     return dt.getValue(row, 1) + ' (' + formatPercent.formatValue(dt.getValue(row, 1)/(dt.getValue(row, 1) + dt.getValue(row, 2))) + ')'; 
 
     }, 
 
     type: "string", 
 
     role: "annotation" 
 
    }, 
 
    // series 1 
 
    2, { 
 
     calc: function (dt, row) { 
 
     return dt.getValue(row, 2) + ' (' + formatPercent.formatValue(dt.getValue(row, 2)/(dt.getValue(row, 1) + dt.getValue(row, 2))) + ')'; 
 
     }, 
 
     type: "string", 
 
     role: "annotation" 
 
    } 
 
    ]); 
 

 
    var chart = new google.visualization.BarChart(document.getElementById('chart_div')); 
 
    chart.draw(view, { 
 
    isStacked: 'percent' 
 
    }); 
 
}

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

修訂SCREENSHOT For reference to my COMMENT