Google Charts逆さまのエリアチャート

Question

通常エリアと "上下"エリアの両方を持つエリアチャートを作成するにはどうすればよいですか？

既にtheir docsを見ていますが、解決策が見つかりませんでした。

最終的な結果は次のようになります。

---

あなたはこのjsfiddleに私の現在の状態を見ることができます。

google.charts.load('current', {'packages':['corechart']}); 
    google.charts.setOnLoadCallback(drawChart); 

    function drawChart() { 
    var data = google.visualization.arrayToDataTable([ 
     ['Year', 'Blue', 'Red'], 
     ['0', 0,  20], 
     ['2', 0,  20], 
     ['4', 0,  20], 
     ['6', 1,  19], 
     ['8', 2,  18], 
     ['10', 3,  17], 
     ['12', 4,  16], 
     ['14', 5,  15], 
     ['16', 6,  14], 
     ['18', 7,  13], 
     ['20', 8,  12], 
     ['22', 9,  11], 
     ['24', 10,  10] 
    ]); 

    var options = { 
     title: 'Company Performance', 
     hAxis: {title: 'Year', titleTextStyle: {color: '#333'}}, 
     vAxis: {minValue: 0} 
    }; 

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

Answer 1

Google Charts AreaChartは、データラインからそのエリアをベースラインまで塗りつぶします。しかし、ベースラインは軸にのみ適用され、2つの異なるベースラインが効果的に必要です.1つはシリーズの上部に、もう1つは他のシリーズの底部にあるので、あなたが望むものを得るためにはトリッキーをしなければなりません。

基本的には、それぞれのシリーズをそれぞれ異なる基準軸でターゲット設定し、2つの軸を同じviewWindowに揃えます。同様に：

var options = { 
    title: 'Company Performance', 
    hAxis: {title: 'Year', titleTextStyle: {color: '#333'}}, 
    vAxes: { 
    0: {viewWindow: { min: 0, max: 20 }, baseline: 0}, 
    1: {viewWindow: { min: 0, max: 20 }, baseline: 20}, 
    }, 
    series: { 
    1: { targetAxisIndex: 1 } 
    } 
}; 

update to your jsfiddleを参照してください。