堆棧內存溢出
  簡體   English   中英

整個條形圖的 Google Charts 堆積條形圖/柱形圖注釋

[英]Google Charts stacked bar/column chart annotation for whole bar

 原文  2018-11-01 08:19:11  9   1    javascript/ charts/ google-visualization/ googlevis

問題描述

我在谷歌圖表中制作了一個堆積柱形圖/條形圖，但是我在格式化“整個”條形的注釋時遇到了問題（意味着每列的每個條形相加）。 以某種方式格式化不起作用，如果我使用“getFormattedValue()”，計算就會被搞砸。 有沒有人有建議？ 我希望將數字縮短為簡短形式（80k 而不是 80.000）

非常感謝！

https://jsfiddle.net/zhp5rny6/

<html>

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <div id="columnchart_values"></div>
<script>
google.charts.load("44", {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = new google.visualization.DataTable({
cols: [
{id:"","label":"Products","pattern":"","type":"string"},
{id:"","label":"Manila","pattern":"","type":"number"},
{id:"","label":"Bangkok","pattern":"","type":"number"},
{id:"","label":"New York","pattern":"","type":"number"},
{id:"","label":"Sydney","pattern":"","type":"number"}],

rows:[
{c:[{v:"Glasses"},{v:-1270.7287},{v:-4486.0961},{v:-1019.4662},{v:3763827.8335}]},
{c:[{v:"Joysticks"},{v:145543.985},{v:2108039.5802},{v:266392.5277},{v:6006566.18690001}]},
{c:[{v:"Laptops"},{v:1723781.2686},{v:4435404.56789999},{v:7060065.3164},{v:17514581.1763}]},
{c:[{v:"PS4"},{v:78002243.0557997},{v:47591320.6768999},{v:43832560.9528002},{v:161580254.021496}]},
{c:[{v:"XBOX One"},{v:10507117.0145001},{v:8059953.41120002},{v:14103816.4604002},{v:34676509.4036004}]},
{c:[{v:"Smartphones"},{v:2373067.7893},{v:-53954.2187},{v:30783391.8722},{v:37288122.5537999}]},
{c:[{v:"Chairs"},{v:86583.2876},{v:71082.0195},{v:79813.2918},{v:22959813.0499999}]},
{c:[{v:"CPU"},{v:12479599.4709999},{v:22650137.9890997},{v:17562381.7794999},{v:25589299.8099997}]},
{c:[{v:"RAM"},{v:null},{v:-59.1},{v:282.7517},{v:1461239.6186}]},
{c:[{v:"Table"},{v:-566.5377},{v:-217.3444},{v:-865.114},{v:356870.886599999}]},
{c:[{v:"Water"},{v:870883.521900001},{v:1128581.9856},{v:1177332.008},{v:3922057.50240001}]}]
});

  var formatter = new google.visualization.NumberFormat({
    pattern: 'short'
  });

    for (var i = 1; i < data.getNumberOfColumns(); i++) {
    formatter.format(data, i);
    }

    var view = getDataView(data);

  function getDataView(dataTable) {
    var dataView;
    var viewColumns = [];

    for (var i = 0; i < dataTable.getNumberOfColumns(); i++) {
      addViewColumn(i);
    }

    function addViewColumn(index) {
        viewColumns.push(index);
        if(index == (dataTable.getNumberOfColumns() - 1)) {
            viewColumns.push({
            calc: function (dt, row) {
                for(var e = 0; e < dt.getNumberOfRows(); e++) {
                    var value = 0;
                    for(var u = 1; u < dt.getNumberOfColumns(); u++) {
                        value += dt.getValue(row, u);
                    }
                    return value.toString();
                }
                },
            type: 'string',
            role: 'annotation',
            });
        }
    }

    dataView = new google.visualization.DataView(dataTable);
    dataView.setColumns(viewColumns);
    return dataView;
  }

  var options = {

    annotations: {
        alwaysOutside: true,
        textStyle: {
            fontSize: 10
        }
    },
    height: 400,
    isStacked: true
    };

  var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
  chart.draw(view, options);
}
</script>
</html>

1 個解決方案

解決方案1
 1 已采納  2018-11-01 11:27:05

使用格式化程序方法 --> formatValue -- 格式化單個值...

    var value = 0;
    for(var u = 1; u < dt.getNumberOfColumns(); u++) {
      value += dt.getValue(row, u);
    }
    return formatter.formatValue(value);

請參閱以下工作片段... 

 google.charts.load("44", {packages:['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable({ cols: [ {id:"","label":"Products","pattern":"","type":"string"}, {id:"","label":"Manila","pattern":"","type":"number"}, {id:"","label":"Bangkok","pattern":"","type":"number"}, {id:"","label":"New York","pattern":"","type":"number"}, {id:"","label":"Sydney","pattern":"","type":"number"}], rows:[ {c:[{v:"Glasses"},{v:-1270.7287},{v:-4486.0961},{v:-1019.4662},{v:3763827.8335}]}, {c:[{v:"Joysticks"},{v:145543.985},{v:2108039.5802},{v:266392.5277},{v:6006566.18690001}]}, {c:[{v:"Laptops"},{v:1723781.2686},{v:4435404.56789999},{v:7060065.3164},{v:17514581.1763}]}, {c:[{v:"PS4"},{v:78002243.0557997},{v:47591320.6768999},{v:43832560.9528002},{v:161580254.021496}]}, {c:[{v:"XBOX One"},{v:10507117.0145001},{v:8059953.41120002},{v:14103816.4604002},{v:34676509.4036004}]}, {c:[{v:"Smartphones"},{v:2373067.7893},{v:-53954.2187},{v:30783391.8722},{v:37288122.5537999}]}, {c:[{v:"Chairs"},{v:86583.2876},{v:71082.0195},{v:79813.2918},{v:22959813.0499999}]}, {c:[{v:"CPU"},{v:12479599.4709999},{v:22650137.9890997},{v:17562381.7794999},{v:25589299.8099997}]}, {c:[{v:"RAM"},{v:null},{v:-59.1},{v:282.7517},{v:1461239.6186}]}, {c:[{v:"Table"},{v:-566.5377},{v:-217.3444},{v:-865.114},{v:356870.886599999}]}, {c:[{v:"Water"},{v:870883.521900001},{v:1128581.9856},{v:1177332.008},{v:3922057.50240001}]}] }); var data2 = data.clone(); var formatter = new google.visualization.NumberFormat({ pattern: 'short' }); for (var i = 1; i < data.getNumberOfColumns(); i++) { formatter.format(data, i); } var view = getDataView(data); function getDataView(dataTable) { var dataView; var viewColumns = []; for (var i = 0; i < dataTable.getNumberOfColumns(); i++) { addViewColumn(i); } function addViewColumn(index) { viewColumns.push(index); if(index == (dataTable.getNumberOfColumns() - 1)) { viewColumns.push({ calc: function (dt, row) { var value = 0; for(var u = 1; u < dt.getNumberOfColumns(); u++) { value += dt.getValue(row, u); } return formatter.formatValue(value); }, type: 'string', role: 'annotation', }); } } dataView = new google.visualization.DataView(dataTable); dataView.setColumns(viewColumns); return dataView; } var options = { annotations: { alwaysOutside: true, textStyle: { fontSize: 10 } }, height: 400, isStacked: true }; var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values")); chart.draw(view, options); }
 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="columnchart_values"></div>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 使用 Google Chart API 在堆積條形圖中使用符號進行注釋 Google Charts JSON格式的條形圖 使用谷歌圖表繪制堆積條形圖 使用Google Charts API的堆積條形圖 注釋強制使用 Google Chart API 出現在堆積條形圖中 如何在Google api圖表的堆疊柱形圖中的條形底部使用批注顯示軸值？ 使用 Google Chart API 為堆積條形圖着色 Google條形圖中的注釋 堆積條形圖-&gt;堆積柱形圖 Angular JS中的堆積條形圖（高圖）
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM