Question

我们尝试在Google地区图表中仅使用不同的线条颜色填充一种颜色。

如果我们使用

isStacked:true

然后它将改变图表表示
（改变y轴最大坐标）

我们只想填充一种颜色（图表中最大边框下方的绿色）。

fiddle

Answer 1

你的意思是这样的：https://jsfiddle.net/7uyz541m/1/或者这个：https://jsfiddle.net/7uyz541m/2/？

您可以将areaOpacity设置为零以删除系列的填充。第一个和第二个jsfiddle链接之间的差异是isstacked值。

series: {
          0: {
              areaOpacity: 0
          }
        },

使两个区域相同＆＃34;相同＆＃34;颜色，但你需要添加一个不同的颜色，如下所示：https://jsfiddle.net/7uyz541m/3

Answer 2

使用ComboChart和两组相同的数据，我相信我能够达到预期的效果。

注意每个series的定义前两个使用areaOpacity: 1相同以防止颜色混合这些也不是visibleInLegend

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);


function drawChart() {
  var data1 = google.visualization.arrayToDataTable([
    ['Year', 'Sales', 'Expenses', 'Expenses', 'Sales'],
    ['2013',  1000,    400,        400,        1000  ],
    ['2014',  1170,    460,        460,        1170  ],
    ['2015',  660,     1120,       1120,       660   ],
    ['2016',  1030,    540,        540,        1030  ]
  ]);

  var data2 = google.visualization.arrayToDataTable([
    ['Year', 'Sales', 'Expenses', 'Expenses', 'Sales'],
    ['2013',  1000,    400,        400,        1000  ],
    ['2014',  1170,    460,        460,        1170  ],
    ['2015',   660,    400,        400,         660  ],
    ['2016',  1030,    540,        540,        1030  ]
  ]);

  var data3 = google.visualization.arrayToDataTable([
    ['Year', 'Sales', 'Expenses', 'Expenses', 'Sales'],
    ['2013',  400,    1000,        1000,        400  ],
    ['2014',  460,    1170,        1170,        460  ],
    ['2015',  400,     660,         660,        400  ],
    ['2016',  540,    1030,        1030,        540  ]
  ]);
  
  var options = {
    title: 'Company Performance',
    hAxis: {
      title: 'Year',
      titleTextStyle: {
        color: '#333'
      }
    },
    vAxis: {
      minValue: 0
    },
    series: {
      0: {
        areaOpacity: 1,
        color: '#EF9A9A',
        type: 'area',
        visibleInLegend: false
      },
      1: {
        areaOpacity: 1,
        color: '#EF9A9A',
        type: 'area',
        visibleInLegend: false
      },
      2: {
        color: '#5C6BC0',
        lineWidth: 5,
        type: 'line'
      },
      3: {
        color: '#B71C1C',
        lineWidth: 5,
        type: 'line'
      }
    }
  };

  var chart = new google.visualization.ComboChart(document.getElementById('chart_div1'));
  chart.draw(data1, options);

  var chart = new google.visualization.ComboChart(document.getElementById('chart_div2'));
  chart.draw(data2, options);

  var chart = new google.visualization.ComboChart(document.getElementById('chart_div3'));
  chart.draw(data3, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div1" style="width: 900px; height: 500px;"></div>
<div id="chart_div2" style="width: 900px; height: 500px;"></div>
<div id="chart_div3" style="width: 900px; height: 500px;"></div>

在谷歌图表填写一种颜色

2 个答案: