Google图表网格背景具有多种颜色 [英] 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.

是否可以在Google图表中为网格框着色?我还有其他方法可以做到吗?

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

谢谢.

推荐答案

没有用于指定背景色的配置选项.
但是您可以使用堆积区域系列添加颜色.

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

有关图表，您将需要5个系列.

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

1)散布
2)区域-左低
3)区域-左高
4)区域-右下
5)区域-右高

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>

这篇关于Google图表网格背景具有多种颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！