如何在Scatter Google图表中显示两种不同的颜色? [英] How to show two different color in Scatter Google Charts?

问题描述

我正在使用Google Charts生成简单的散点图.我想要图表中两种不同的颜色. 我们如何添加添加两个不同的背景色.我需要为负数部分添加背景红色，为正值数部分添加绿色

I am using Google Charts for a simple scatter Chart. I want two different color in chart. how we add add to tow different background color. i need to add background for negative section red color and add green color for positive value section

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>

我想添加不同的背景颜色，如上图所示 正极部分颜色不同，负极部分颜色不同

I want to add different background color like above image positive section different color and negative section different color

推荐答案

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

to add background colors to the chart, we can use an 'area' series,
one for the positive color and one for the negative.

在加载初始数据后，
添加另外两列.
在图表的整个范围内为这些列添加行/值.
将null用作原始列值.

after the initial data has been loaded,
add two additional columns.
add rows / values for these columns for the full range of the chart.
use null for the original column value.

// 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]);

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

in the options, add the following options...

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的列.

then when placing the image markers, ignore columns where the original value is null.

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

请参阅以下工作摘要...

see following working snippet...

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>

这篇关于如何在Scatter Google图表中显示两种不同的颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！