请看下图。
我需要的是黄色而不是灰色,但在 Google 面积图中,填充颜色似乎始终与笔触颜色相同,您只能指定 areaOpacity,在这种特殊情况下为 0.5。
现在看这张图片:
我可以手动更改 <path>
的填充颜色元素,但它似乎没有在图表 API 中公开。至少,我浏览了问答网站和文档,但没有找到;希望我没有忽略它。有人可以告诉您是否有类似的问题以及是否存在解决方法?
最佳答案
你可以使用'style'
column role
可用的样式是...
color
opacity
stroke-width
stroke-color
stroke-opacity
fill-color
fill-opacity
请参阅以下工作片段...
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var areaStyle = 'fill-color: #ffeb3b; stroke-color: #b71c1c; stroke-width: 8;';
var dataTable = new google.visualization.DataTable({
cols: [
{label: 'Year', type: 'string'},
{label: 'Sales', type: 'number'},
{role: 'style', type: 'string'}
],
rows: [
{c:[{v: '2013'}, {v: 1000}, {v: areaStyle}]},
{c:[{v: '2014'}, {v: 1200}, {v: areaStyle}]},
{c:[{v: '2015'}, {v: 1400}, {v: areaStyle}]},
{c:[{v: '2016'}, {v: 1800}, {v: areaStyle}]}
]
});
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(dataTable, {
areaOpacity: 1.0,
legend: {
position: 'none'
}
});
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
关于javascript - Google 面积图中不同颜色的填充和描边,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39409790/