google-visualization - Google縦棒グラフにターゲットラインを追加するには?

Question

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

Answer 1

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

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

Answer 2

上で提案された 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
        }
    ]
};

Answer 3

醜いアウトラインを避けるには、次を使用します。 enableInteractivity: false