6

これで私を助けてくれることを願っています：

積み重ねられた列のグラフがあり、それらはすべて、各列に積み重ねる 2 つの値があります。チャートを正常に作成しましたが、各列の各部分に注釈を追加する必要があります (適切な名前はわかりません)。これは、独自の列の部分で表される合計の割合を示します。

以下の例では、積み重ねられた列が表示されるように注釈を設定する必要があります。最初の列には、値が「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>
4

1 に答える 1