Question

我正在尝试访问堆积区域（Google图表）中系列的填充属性。我希望堆叠图表的底部系列变得透明，如JSFiddle代码所示。

请一个人请帮忙吗？非常感谢您的帮助。

   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div class="row">
    <!-- Div that will hold the pie chart-->
    <div id="chart_div"></div>

</div>

     google.charts.load('current', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawChart);

           function drawChart() {
          var data = google.visualization.arrayToDataTable([
            ['Year', 'Sales', 'Expenses'],
            ['2013', 1000, 400],
            ['2014', 1170, 460],
            ['2015', 660, 1120],
            ['2016', 1030, 540]
          ]);

          var options = {
              isStacked: true,
              title: 'Company Performance',
              hAxis: { title: 'Year', titleTextStyle: { color: '#333' } },
              vAxis: { minValue: 0 },
              series:
              {
                  0: { id: 'ss223', type: 'area', backgroundColor: { fill: 'black' } },
                  1: { type: 'area', backgroundColor: { fill: 'transparent' }}
              }
          };

          var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
          chart.draw(data, options);
      }

Answer 1

只需更换...
backgroundColor: { fill: 'transparent' }

...与
color: 'transparent'

系列将被编号，从底部的零开始

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

注意：如果你想让区域变成黑色，而不仅仅是边框，
将此添加到您的options ...
areaOpacity: 1

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses', 'Line 1', 'Line 2'],
      ['2013', 1000, 400, 200, 400],
      ['2014', 1170, 460, 200, 400],
      ['2015', 660, 1120, 200, 400],
      ['2016', 1030, 540, 200, 400]
    ]);

    var options = {
      isStacked: true,
      title: 'Company Performance',
      hAxis: { title: 'Year', titleTextStyle: { color: '#333' } },
      vAxis: { minValue: 0 },
      series:
      {
        0: { id: 'ss223', type: 'area', color: 'transparent' },
        1: { type: 'area', color: 'black' },
        2: { type: 'line', color: 'red' },
        3: { type: 'line', color: 'blue' }
      }
    };

    var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  },
  packages:['corechart']
});

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

Google Chart访问路径的填充属性

1 个答案: