Google区域图中不同颜色的填充和描边 [英] Different colour of fill and stroke in Google area chart

问题描述

请看下面的图片。

我需要的是使用黄色而不是灰色，但似乎在Google区域图中填充颜色总是与笔画颜色相同，您只能在此特定情况下指定areaOpacity，即0.5。

立即看到这张图：

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

您可以使用'样式' 列角色

可用样式为...

颜色

不透明度

笔画宽度

笔触颜色

笔画不透明度
$ b $填充颜色

填充不透明

请参阅以下工作片段...

 < script src =https://www.gstatic.com/charts/loader.js>< / script>< div id =chart_div> ;< / div>  

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?

解决方案

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>

这篇关于Google区域图中不同颜色的填充和描边的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！