нет параметров конфигурации для указания цвета фона.
, но вы можете использовать составную область для добавления цветов.
для рассматриваемого графика вам понадобится 5 серий.
1) разброс
2) область - левый низкий
3) область - левый высокий
4) область - правый низкий
5) область - правый высокий
см. следующий рабочий фрагмент ...
google.charts.load('current', {
packages:['corechart']
}).then(function () {
var dataTable = new google.visualization.DataTable({
cols: [
{label: 'X', type: 'number'},
{label: 'Left-Low', type: 'number'},
{label: 'Left-High', type: 'number'},
{label: 'Right-Low', type: 'number'},
{label: 'Right-High', type: 'number'},
{label: 'Y', type: 'number'}
],
rows: [
// scatter
{c:[{v: 14}, {v: 130}, null, null, null, null]},
// colors
{c:[{v: 1}, null, {v: 170}, {v: 130}, null, null]},
{c:[{v: 6}, null, {v: 170}, {v: 130}, null, null]},
{c:[{v: 6}, null, {v: null}, {v: null}, {v: 170}, {v: 130}]},
{c:[{v: 15}, null, {v: null}, {v: null}, {v: 170}, {v: 130}]},
]
});
var options = {
colors: ['#ffffff'],
legend: 'none',
hAxis: {
ticks: [1, 6, 15],
title: 'Coleman-Liau Index'
},
height: 400,
isStacked: true,
series: {
// Left-Low
1: {
areaOpacity: 1,
color: '#e53935',
enableInteractivity: false,
type: 'area',
visibleInLegend: false
},
// Left-High
2: {
areaOpacity: 1,
color: '#43a047',
enableInteractivity: false,
type: 'area',
visibleInLegend: false
},
// Right-Low
3: {
areaOpacity: 1,
color: '#43a047',
enableInteractivity: false,
type: 'area',
visibleInLegend: false
},
// Right-High
4: {
areaOpacity: 1,
color: '#e53935',
enableInteractivity: false,
type: 'area',
visibleInLegend: false
}
},
seriesType: 'scatter',
vAxis: {
ticks: [40, 170, 300],
title: 'Talking Speed (WpM)'
}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(dataTable, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>