如何在 Scatter Google Charts 中显示两种不同的颜色？答案

【问题标题】：How to show two different color in Scatter Google Charts?如何在 Scatter Google Charts 中显示两种不同的颜色？
【发布时间】：2019-03-18 16:39:40
【问题描述】：

我正在使用谷歌图表制作一个简单的散点图。我想要图表中有两种不同的颜色。我们如何添加到两个不同的背景颜色。我需要为负部分红色添加背景，为正值部分添加绿色

function drawChart() {
    // Define the chart to be drawn.
    var data = new google.visualization.DataTable();
    data.addColumn('number', '');
    data.addColumn('number', '');
    data.addRows([
        [-0.5, 1],
        [100, 1],
        [-80, 2],
        [25, 2],

        [60, 8],
    ]);

    // Set chart options
    var options = {
        title: 'guilt experience Vs eat satisfaction',
        titlePosition: 'none',
        position: 'center',
        hAxis: {
            title: 'Guilt Value\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0Eat Value',
            minValue: 0,
            maxValue: 15,
            ticks: [0, 20, 40, 60, 80, 100, -20, -40, -60, -80, -100]
        },

        vAxis: {
            title: '',
            minValue: 0,
            ticks: [0, 1, 2, 3, 4, 5, 6, 7, 8]
        },
        legend: {
            position: 'none'
        },
    };

    // Instantiate and draw the chart.
    var container = document.getElementById('chart_div');
    var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));

    google.visualization.events.addListener(chart, 'ready', function() {
        var layout = chart.getChartLayoutInterface();

        for (var i = -0; i < data.getNumberOfRows(); i++) {
            // add image above every fifth element
            var xPos = layout.getXLocation(data.getValue(i, 0));
            var yPos = layout.getYLocation(data.getValue(i, 1));
            var whiteHat = container.appendChild(document.createElement('img'));
            if (data.getValue(i, 0) < 0) {
                whiteHat.src = 'https://i.imgur.com/LqiTeQI.png';
            } else {
                whiteHat.src = 'https://i.imgur.com/rACTObW.png';
            }
            whiteHat.style.position = 'absolute';
            whiteHat.style.height = '15px';
            whiteHat.style.width = '15px';
            // 16x16 (image size in this example)
            whiteHat.style.top = (yPos) + 'px';
            whiteHat.style.left = (xPos) + 'px';
        }
    });
    chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js">
</script>
<script type="text/javascript">
  google.charts.load('current', {
    packages: ['corechart', 'scatter']
  });
</script>
<div id="chart_div" ></div>

我想添加不同的背景颜色，如上图正片不同颜色，负片不同颜色

【问题讨论】：

标签： jquery charts google-visualization

【解决方案1】：

要为图表添加背景颜色，我们可以使用'area' 系列，
一种用于正颜色，一种用于负颜色。

加载初始数据后，
添加两个额外的列。
为图表的整个范围添加这些列的行/值。
使用 null 作为原始列值。

// add columns & rows for background
data.addColumn('number', '');
data.addRow([0, null, 8]);
data.addRow([-100, null, 8]);
data.addColumn('number', '');
data.addRow([0, null, null, 8]);
data.addRow([100, null, null, 8]);

在选项中，添加以下选项...

colors: ['blue', 'red', 'green'],  // colors for the series
lineWidth: 0,                      // remove line for top of area series
pointSize: 0,                      // remove points on area series
series: {                          // change last two series to area
  1: {type: 'area'},
  2: {type: 'area'}
}

然后在放置图像标记时，忽略原始值为null 的列。

  // exclude null values
  var yValue = data.getValue(i, 1);
  if (yValue !== null) {
    var xPos = layout.getXLocation(data.getValue(i, 0));
    ...

请参阅以下工作 sn-p...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('number', '');
  data.addColumn('number', '');
  data.addRows([
    [-0.5, 1],
    [100, 1],
    [-80, 2],
    [25, 2],
    [60, 8],
  ]);

  // add columns & rows for background
  data.addColumn('number', '');
  data.addRow([0, null, 8]);
  data.addRow([-100, null, 8]);
  data.addColumn('number', '');
  data.addRow([0, null, null, 8]);
  data.addRow([100, null, null, 8]);

  var options = {
    title: 'guilt experience Vs eat satisfaction',
    titlePosition: 'none',
    position: 'center',
    hAxis: {
      title: 'Guilt Value\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0Eat Value',
      minValue: 0,
      maxValue: 15,
      ticks: [0, 20, 40, 60, 80, 100, -20, -40, -60, -80, -100]
    },
    vAxis: {
      title: '',
      minValue: 0,
      ticks: [0, 1, 2, 3, 4, 5, 6, 7, 8]
    },
    legend: {
      position: 'none'
    },
    colors: ['blue', 'red', 'green'],
    lineWidth: 0,
    pointSize: 0,
    series: {
      1: {type: 'area'},
      2: {type: 'area'}
    }
  };

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));

  google.visualization.events.addListener(chart, 'ready', function() {
    var layout = chart.getChartLayoutInterface();
    for (var i = -0; i < data.getNumberOfRows(); i++) {
      // exclude null values
      var yValue = data.getValue(i, 1);
      if (yValue !== null) {
        var xPos = layout.getXLocation(data.getValue(i, 0));
        var yPos = layout.getYLocation(yValue);
        var whiteHat = container.appendChild(document.createElement('img'));
        if (data.getValue(i, 0) < 0) {
          whiteHat.src = 'https://i.imgur.com/LqiTeQI.png';
        } else {
          whiteHat.src = 'https://i.imgur.com/rACTObW.png';
        }
        whiteHat.style.position = 'absolute';
        whiteHat.style.height = '15px';
        whiteHat.style.width = '15px';
        whiteHat.style.top = (yPos) + 'px';
        whiteHat.style.left = (xPos) + 'px';
      }
    }
  });
  chart.draw(data, options);
});

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

【讨论】：