谷歌图表颠倒区域图表

如何创建一个既有正常区域又有“颠倒”区域的区域图表？谷歌图表颠倒区域图表

已经看过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); 
    }

来源

2017-10-12 Silver Ringvee

请显示您使用的代码，至少是选项和示例数据。我猜你会把这两个系列放在两个独立的轴上，如果是的话，你需要使用viewWindow选项强制它们具有相同的对齐方式。 – dlaliberte

请参阅最新的问题@dlaliberte –

对不起，我误解你*想要*最终结果。但鉴于你目前的状态（谢谢），这使得它更加清晰。无论谁投降，都应重新考虑，因为这是一个很好的问题。 – dlaliberte

Google Charts AreaChart从数据行向下或直到基线填充区域。但是基线（目前）只适用于坐标轴，并且您实际上需要两个不同的基线，一个坐标系在顶部，另一个坐标系在底部，所以您必须做一些技巧才能得到您想要的。

基本上，将每个系列定位到不同的轴，每个轴都有自己的基线，并将两个轴与同一个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。

来源

2017-10-12 15:35:01 dlaliberte

哇，这真棒，完全是我在找的！谢谢！ –

谷歌图表颠倒区域图表

回答

相关问题