2013-12-15 103 views
1

关于Google Charts,有没有办法调整面积图中两个或多个重叠区域之间的颜色或不透明度?我一直在尝试修改Area Chart开发网站上提供的Google示例代码。为方便起见,我提供了以下示例代码的副本。注意:如果没有官方支持的方式来做到这一点,我也有兴趣使用任何肮脏的方法去做。如何更改Google Area Chart重叠颜色或不透明度?

google.load("visualization", "1", {packages:["corechart"]}); 
    google.setOnLoadCallback(drawChart); 
    function drawChart() { 
    var data = google.visualization.arrayToDataTable([ 
     ['Year', 'Sales', 'Expenses'], 
     ['2013', 1000,  400], 
     ['2014', 1170,  460], 
     ['2015', 660,  1120], 
     ['2016', 1030,  540] 
    ]); 

    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); 
    } 

为了帮助理清我希望完成的任务,请参阅下图。 enter image description here

+0

检查 'areaOpacity' 选项。默认值设置为0.3 –

+0

了解。我认为这里已经有类似的问题。第三系列用于颜色白色和不透明度1来切割重叠部分。 –

+0

我还没有找到任何其他相关问题。我会继续寻找(但我已经搜寻了管子,例如,等等)。在系列选项中添加第三个条目没有得到任何结果。您可以在这里尝试代码:code.google.com/apis/ajax/playground/... - 我只是将上面的代码复制并粘贴到输入字段中,并将函数名称更改为“drawVisualization”。 – Derrekito

回答

2

你可以用不同的areaOpacity添加series到您的选择:

... 
vAxis: {minValue: 0}, 
series: { 
    0: { areaOpacity: 0.2}, 
    1: { areaOpacity: 0.7} 
} 
+0

除非我滥用这些选项,否则它们只影响整个数据集。我希望只修改图上的重叠部分(例如,设置为100%不透明度的重叠部分)。我已更新我的问题,以通过添加模拟图像来帮助澄清我的问题。 – Derrekito

+0

应用系列:{0:{color:'green',opacity:1},1:{color:'blue'},2:{color:'yellow'}}除了设置'绿色“和”蓝色“。我将你的回答解释为建议我应该应用第三个系列,并选择图的第三个区域(在这种情况下是重叠部分)。如果是这样,添加第三个区域不会修改图形。 – Derrekito

相关问题