Google Charts APIには、2つのグラフの間の領域に塗りつぶしの色を作成する方法を示す例がありません。私の場合、この塗りつぶしの色は、最悪の結果と最良の結果の間の広がりを表す領域を塗りつぶす必要があります。
これが私が欲しいものです:
これは私が持っているものです
これをどのように行うことができるかについてのアイデアはありますか(あるとしても!)?
Google Charts APIには、2つのグラフの間の領域に塗りつぶしの色を作成する方法を示す例がありません。私の場合、この塗りつぶしの色は、最悪の結果と最良の結果の間の広がりを表す領域を塗りつぶす必要があります。
これが私が欲しいものです:
これは私が持っているものです
これをどのように行うことができるかについてのアイデアはありますか(あるとしても!)?
AreaChart
積み重ねられた創造的な思考を使用することで、希望するチャートの再作成に非常に近づくことができました。次のコードをコードプレイグラウンドに接続します。
function drawVisualization() {
var data = google.visualization.arrayToDataTable([
['a', 'b', 'c', 'd'],
['1', 100, 10, 10],
['10', 250, 150, 50],
]);
var ac = new google.visualization.AreaChart(document.getElementById('visualization'));
ac.draw(data, {
isStacked: true,
series: [{color: 'white', lineWidth: 0}, {color: 'purple'}, {color: 'purple', lineWidth: 0}],
legend: {position: 'none'},
});
}
キーは、下/最初のシリーズの色をチャートの背景と同じにし、最後/上のシリーズの線幅を持たないようにすることです。これらは両方ともseries
パラメーターによって制御されます。キャッチは、シリーズがスタックされているため、正しい数を取得するには、下のシリーズの値を減算する必要があるということです。たとえば、最低の線を250、中/濃い紫色の線を400、最上の線を450にする場合は、値250、150、および50を使用する必要があります。
見たことはありませんが、「interval」ロールを使用してsthを実行できる可能性があります。