2014-01-16 15 views
6

の各部分に異なる注釈付きの列を積み重ね。私は正常にグラフを作成しましたが、各列の各部分に注釈を追加する必要があります(私はそれのための適切な名前は分かりません)。Googleのチャートは、私はあなたがこれで私を助けることを願ってコラム

以下の例では、スタックされた列を表示するように注釈を設定する必要があります。最初の列の値が「60%」の「良い」領域に注釈を付ける必要があります。 「40%」の「不良」領域などを含む。

これまでは、「不良」領域のパーセンテージ値を示す1つの注釈を含めることができました。これは各列の上部に浮かんでいます。列の各領域の注釈を適切に定義するためには助けが必要であり、その領域の中央に配置することをお勧めします。

ご協力いただきありがとうございます。

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> 

答えて

11

あなたが「グッド」の列の後に別の注釈列を追加する必要があります。私はそれはそれは簡単だった信じてすることはできません

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; 
    } 
}]); 
+0

。どうもありがとうございました。 – user2888319

+0

ありがとう! –