8

私は Google Chart の積み上げ縦棒グラフを使用しています。達成したいのは、各列の上に合計を表示することであり、これには注釈を使用しています。画像を見ると、なぜか 5 列目 (1,307.20) の注釈だけが期待どおりに機能しています。

ここに画像の説明を入力

私が調査したところ、これは Google Chart のバグのようです。このバグは次のように説明できます。

[[Date, Car, Motobike, {role: :annotation}],
[June 2015, 500, 0, 500],
[Feb 2015, 500, 600, 1100]]
[March 2015, 700, 0, 700],

上記のデータでは、2015 年 2 月の注釈のみが正しく表示されます。他の 2 つは最後の値が 0 であるため、6 月と 3 月の最後の値を 1 に変更すると、注釈が正しく表示されます。 .

次に、「ゼロ以外の」データを常に top に表示することを回避策と考えます。結果は次のとおりです。

ここに画像の説明を入力

注釈は適切に上に移動しますが、ご覧のとおり、それは列内にあり、達成したいのはそれを列の上に移動することです。

私はしばらくこれで立ち往生しています.Googleドキュメントはこのケースではあまり役に立ちません. どんな助けでも大歓迎です

4

3 に答える 3

6

私は同じ問題を抱えていました.私のシリーズのいくつかは私の最後の値として0を持っていたので、ラベルは上部ではなくX軸に表示されました. 動的データでは、最後の値が決して 0 にならないようにするのは本当に難しいことです。

「回避策として、追加の系列を持つ ComboChart を使用して、各列スタックの一番上にポイントを描画することを検討してください。各ポイントを配置する場所を知るには、他の系列の合計を自分で計算する必要があります。」

Google のギャラリーからコンボ チャートを見つけ、jsfiddle を開いて何ができるかを確認しました。データはほとんど残しましたが、シリーズ名のラベルを変更し、数字を少しシンプルにしました。データに関係なくグラフの目的にとらわれないでください。最後の列が 0 ( https://jsfiddle.net/ L5wc8rcp/1/ ):

function drawVisualization() {
    // Some raw data (not necessarily accurate)
    var data = google.visualization.arrayToDataTable([
        ['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', 'Total', {type: 'number', role: 'annotation'}],
        ['Application', 5, 2, 2, 8, 0, 17, 17],
        ['Friend', 4, 3, 5, 6, 2, 20, 20],
        ['Newspaper', 6, 1, 0, 2, 0, 9, 9],
        ['Radio', 8, 0, 8, 1, 1, 18, 18],
        ['No Referral', 2, 2, 3, 0, 6, 13, 13]
    ]);

    var options = {
        isStacked: true,
        title : 'Monthly Coffee Production by Country',
        vAxis: {title: 'Cups'},
        hAxis: {title: 'Month'},
        seriesType: 'bars',
        series: {5: {type: 'line'}},
    };

    var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}

これにより、このグラフが作成されました。これは素晴らしいスタートです。

ここに画像の説明を入力

ご覧のとおり、シリーズ 5 (他のシリーズの合計) は であるtype: 'line'ため、常にスタックの一番上を指します。ここで、連続する水平方向の合計を比較するために使用されていないため、チャートに線が必要なわけではありませんlineWidth: 0でした。スタックとしての凡例 ( https://jsfiddle.net/Lpgty7rq/ ):

function drawVisualization() {
    // Some raw data (not necessarily accurate)
    var data = google.visualization.arrayToDataTable([
        ['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', '', {type: 'number', role: 'annotation'}],
        ['Application', 5, 2, 2, 8, 0, 17, 17],
        ['Friend', 4, 3, 5, 6, 2, 20, 20],
        ['Newspaper', 6, 1, 0, 2, 0, 9, 9],
        ['Radio', 8, 0, 8, 1, 1, 18, 18],
        ['No Referral', 2, 2, 3, 0, 6, 13, 13]
    ]);

    var options = {
        isStacked: true,
        title : 'Monthly Coffee Production by Country',
        vAxis: {title: 'Cups'},
        hAxis: {title: 'Month'},
        seriesType: 'bars',
        series: {5: {type: 'line', lineWidth: 0}}, 
    };

   var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
   chart.draw(data, options);
}

そして出来上がり！

ここに画像の説明を入力

于 2015-09-24T18:50:50.020 に答える
5

を使用しalwaysOutside: trueます。

annotations: {
     textStyle: {
         color: 'black',
         fontSize: 11,
     },
     alwaysOutside: true
}
于 2016-09-09T14:29:22.437 に答える
4

annotations.alwaysOutside オプションを使用する必要があります。

annotations.alwaysOutside -- 棒グラフと縦棒グラフでは、true に設定すると、すべての注釈が棒/縦棒の外側に描画されます。

https://google-developers.appspot.com/chart/interactive/docs/gallery/columnchartを参照してください

ただし、積み上げグラフでは、現在、注釈は常に列の内側に強制されます。これは、次のメジャー リリースで修正される予定です。

回避策として、余分なシリーズを含む ComboChart を使用して、各列スタックの上部にポイントを描画することを検討してください。各ポイントを配置する場所を知るには、他のシリーズの合計を自分で計算する必要があります。次に、pointSize を 0 にして、このシリーズの後に注釈列を追加します。

于 2015-06-04T14:33:16.380 に答える