谷歌圖表堆放着不同的註釋列，每件列

我有堆疊列圖表，它們都具有兩個值中的每一列堆棧。我已經成功創建了圖表，但是我需要爲每一列的每一列添加一個註釋（我不知道它的正確名稱），指出了它自己的列中該圖塊所代表的總數的百分比。

在下面給出的示例中，我需要設置註釋以便顯示堆積列，並且對於第一列應該在「好」區域具有值「60％」的註釋以及另一個註釋「40％」的「壞」區域等等。

到目前爲止，我已經設法包含一個註釋，顯示「壞」區域的百分比值，該區域浮動到每列的頂部。我需要幫助正確定義列的每個區域的註釋，並且希望將其置於其給定區域的中心。

非常感謝您的幫助。

TL; DR：我需要爲每一列的每一列居中註釋。

<body> 
     <div id="chart" style="width: 900px; height: 500px; border: 1px solid black;"> 
     </div> 
    </body> 
<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<script type="text/javascript"> 
    google.load("visualization", "1", { packages: ["corechart"] }); 
    google.setOnLoadCallback(drawChart); 
    function drawChart() { 
     var data = google.visualization.arrayToDataTable([ 
      ['Date', 'Good', 'Bad'], 
      [Date(2013, 11, 1), 3, 2], 
      [Date(2013, 11, 2), 5, 3], 
      [Date(2013, 11, 3), 9, 2], 
      [Date(2013, 11, 4), 6, 3] 
     ]); 

     var view = new google.visualization.DataView(data); 

     view.setColumns([{ 
      label: 'Date', 
      type: 'string', 
      calc: function (dt, row) { 
       var str = dt.getValue(row, 0); 
       return { v: str, f: str.toString('dd/MM/aaaa') }; 
      } 
     } 
      , { 
       label: 'Good', 
       type: 'number', 
       calc: function (dt, row) { 
        var good = dt.getValue(row, 1); 
        var bad = dt.getValue(row, 2); 
        return { v: good/(good + bad), f: good.toString() }; 
       } 
      }, { 
       label: 'Bad', 
       type: 'number', 
       calc: function (dt, row) { 
        var good = dt.getValue(row, 1); 
        var bad = dt.getValue(row, 2); 
        return { v: bad/(good + bad), f: bad.toString() }; 
       } 
      }, 
      { 
       role: 'annotation', 
       type: 'string', 
       calc: function (dt, row) { 
        var good = dt.getValue(row, 1); 
        var bad = dt.getValue(row, 2); 
        var perc = (bad/(good + bad)) * 100; 
        var ann = parseFloat(Math.round(perc).toFixed(2)) + "%"; 
        return { v: ann, f: ann.toString() }; 
       } 
      }]); 

     var options = { 
      title: 'Daily deeds', 
      isStacked: true, 
      vAxis: { format: '#.##%' } 
     }; 

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

來源

2014-01-16 user2888319

你需要你的「好」列之後添加另一個註解列：

view.setColumns([{ 
    label: 'Date', 
    type: 'string', 
    calc: function (dt, row) { 
     var str = dt.getValue(row, 0); 
     return { v: str, f: str.toString('dd/MM/aaaa') }; 
    } 
}, { 
    label: 'Good', 
    type: 'number', 
    calc: function (dt, row) { 
     var good = dt.getValue(row, 1); 
     var bad = dt.getValue(row, 2); 
     return { v: good/(good + bad), f: good.toString() }; 
    } 
}, { 
    role: 'annotation', 
    type: 'string', 
    calc: function (dt, row) { 
     var good = dt.getValue(row, 1); 
     var bad = dt.getValue(row, 2); 
     var perc = (good/(good + bad)) * 100; 
     var ann = perc.toFixed(2) + "%"; 
     return ann; 
    } 
}, { 
    label: 'Bad', 
    type: 'number', 
    calc: function (dt, row) { 
     var good = dt.getValue(row, 1); 
     var bad = dt.getValue(row, 2); 
     return { v: bad/(good + bad), f: bad.toString() }; 
    } 
}, { 
    role: 'annotation', 
    type: 'string', 
    calc: function (dt, row) { 
     var good = dt.getValue(row, 1); 
     var bad = dt.getValue(row, 2); 
     var perc = (bad/(good + bad)) * 100; 
     var ann = perc.toFixed(2) + "%"; 
     return ann; 
    } 
}]);

來源

2014-01-16 22:54:45 asgallant

我不敢相信它是那麼容易。非常感謝你。 – user2888319

非常感謝你！ –

谷歌圖表堆放着不同的註釋列，每件列

回答

相關問題