Google chart grid background with multiple colors

问题

I create below simple scatter chart with only one point, (I always have only one point)

In the above chart I want to mark top left and bottom right boxes as one color and remaining two boxes as different to suggest to users that whether their value is good or bad.

Top left and bottom right are good(green) and top right and bottom left are bad(red).

just for reference, i'm adding sample image of what colors go where

I've searched a lot and couldn't find any solution for this. I tried linear-gradients but it is not possible to have linear-gardient with the way I wanted.

Is it possible to color grid boxes in google charts? Is there any other way I can do this?

Thanks.

回答1:

there are no config options to specify a background color.
but you can use a stacked area series to add the colors.

for the chart in question, you will need 5 series.

1) scatter
2) area - Left Low
3) area - Left High
4) area - Right Low
5) area - Right High

see following working snippet...

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>

来源：https://stackoverflow.com/questions/52719735/google-chart-grid-background-with-multiple-colors

标签

javascript

css

svg

charts

google-visualization