web-dev-qa-db-ja.com

Google縦棒グラフでターゲット線を追加する方法は？

このようにグーグル縦棒グラフにターゲット線を追加する方法。

google column chart

google-visualization
26
Sivanath

縦棒グラフと折れ線グラフを組み合わせる場合は、ComboChartを使用します。ドキュメントと例はここにあります： https://developers.google.com/chart/interactive/docs/gallery/combochart

基本的に、折れ線グラフのデータポイントをDataTableの列の1つとし、この列を "series" = "line"として指定します。他の列はColumnChartで視覚化されます。

20
user1447121

Stepped Area シリーズを使用してこれを実現できます。少し厄介ですが、うまく機能します。

var data = google.visualization.arrayToDataTable([
    ['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', ''],
    ['2004/05',  165,      938,         522,             998,           450,      250],
    ['2005/06',  135,      1120,        599,             1268,          288,      250],
    ['2006/07',  157,      1167,        587,             807,           397,      250],
    ['2007/08',  139,      1110,        615,             968,           215,      250],
    ['2008/09',  136,      691,         629,             1026,          366,      250]
]);

var options = {
    seriesType: "line",
    series: {5: {
      type: "steppedArea", 
      color: '#FF0000', 
      visibleInLegend: false, 
      areaOpacity: 0}
    }
};

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

Horizontal target line on Google Chart

例

階段状のGoogleグラフの例

4
Ryan

上記のsteppedArea @Ryanの提案を少し厄介なものにするには、2番目（右）の軸を設定し、ベースラインをターゲットラインに必要な値に設定します。 2番目の軸は、seppedAreaデータ用にセットアップされます。これにより、チャートの上および線の下にポインタを置くと、輪郭がはっきりしません。オプションで次のようなことをしてください：

var options = {
    seriesType: "line",
    series: {5: {
        type: "steppedArea", 
        color: '#FF0000', 
        visibleInLegend: false, 
        areaOpacity: 0,
        targetAxisIndex: 1 } //tell the series values to be shown in axe 1 bellow
    },
    vAxes: [  //each object in this array refers to one axe setup
        {},  //axe 0 without any special configurations
        {
            ticks: [250], //use this if you want to show the target value
            baseline: 250 //this shifts the base line to 250
        }
    ]
};
2
jpavel

醜いアウトラインを回避するには、次のように使用します：enableInteractivity: false

2
Tuur