javascript - Google 面积图中不同颜色的填充和描边

Question

请看下图。

我需要的是黄色而不是灰色，但在 Google 面积图中，填充颜色似乎始终与笔触颜色相同，您只能指定 areaOpacity，在这种特殊情况下为 0.5。

现在看这张图片:

我可以手动更改 <path> 的填充颜色元素，但它似乎没有在图表 API 中公开。至少，我浏览了问答网站和文档，但没有找到；希望我没有忽略它。有人可以告诉您是否有类似的问题以及是否存在解决方法？

Answer 1

你可以使用'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>