Different colour of fill and stroke in Google area

问题:

Please, look at the image below.

What I need is to have yellow colour instead of grey but it seems that in Google area charts the fill colour is always the same as the colour of the stroke, you can only specify areaOpacity which is 0.5 in this particular case.

See this image now:

I can change manually the fill colour of the <path> element but it does not seem to be exposed in chart API. At least, I went through Q&A sites and documentation and didn't find it; hope I didn't overlook it. Could someone tell if you had similar issue and whether workaround exists?

回答1:

you can use a 'style' column role

available styles are...

color
opacity
stroke-width
stroke-color
stroke-opacity
fill-color
fill-opacity

see following working snippet...

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>

回答2:

OK, I found a workaround.

Here's jQuery code that does the job:

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

And here's how it looks like. Mention that there are multiple path elements and we only need those which have no stroke set.

I still cannot find option for this in API, docs does not specify explicitly that this is not supported either.

Edit: Please, see accepted answer by @WhiteHat.