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

// 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。顯示堆積欄中的百分比谷歌圖表

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

來源

2016-11-17 Skylark Jacobs

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

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

來源

2016-11-17 12:33:50 WhiteHat

你好非常感謝你！解決了！你知道我可以如何把百分比值而不是整個值的任何方式嗎？ –

您好，我想感謝您抽出時間回信給我！然而，目前的情況是，它正在考慮價值的百分比而不是實際的百分比。所以我只是爲了便於參考而插入，是因爲我想要顯示100％而不是5％的百分比。還有，是否可以將百分比放在堆疊酒吧的中間而不是極右的位置？ –

上面__EDIT__中的計算百分比變化 - 對於標籤放置 - 沒有標準選項，但可以在「ready」事件觸發時手動實現 – WhiteHat

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

回答

相關問題