Google区域图表中不同颜色的填充和描边

Question

请看下面的图片。

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

立即查看此图片：

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

Answer 1

您可以使用'style' column role

可用的样式是......

  

颜色
  不透明
  笔划宽度
  中风色
  行程不透明
  补色
  填充不透明度

请参阅以下工作代码段...

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>

Answer 2

好的，我找到了解决方法。

这是完成工作的jQuery代码：

$("#chart_div").find("path[stroke='none']").attr("fill","#ffff00");

这就是它的样子。提到有多个路径元素，我们只需要那些没有笔画集的元素。

我仍然无法在API中找到此选项，文档未明确指出也不支持此选项。

编辑：请查看@WhiteHat接受的答案。