如何使用谷歌图表向散点图的点添加渐变颜色填充？

Question

基本上我想用三个系列制作一个数据集的散点图：(1) x (2) y (3) 第三个系列，只需要 0 和 1。

我希望第 3 个系列值 = 0 的点显示为红色，而其余点显示为蓝色。

我正在使用 Google Charts，他们在 https://developers.google.com/chart/image/docs/gallery/scatter_charts 中有一个颜色填充选项，但它已被弃用并且不再使用。任何人都可以提供执行相同操作所需的命令吗？

Answer 1

如果我正确阅读了您的问题，那么您并不是在尝试显示第 3 个系列，而只是尝试根据该值设置点的颜色。如果这是正确的，你可以这样做：

google.load("visualization", "1.1", {packages: ["corechart"]});

google.setOnLoadCallback(drawChart);
function drawChart() {
  var data = [
    [0, 0, 0],  [1, 1, 0],   [2, 2, 1],
    [3, 3, 1],  [4, 4, 0],   [5, 5, 1],
    [6, 6, 0],  [7, 7, 1],   [8, 8, 0],
    [9, 9, 1],  [10, 10, 1], [11, 0, 0],
    [12, 5, 0], [13, 3, 0],  [14, 1, 1],
    [15, 5, 1], [16, 6, 0],  [17, 7, 1],
    [18, 3, 0], [19, 9, 1],  [20, 2, 1],
    [21, 2, 0], [22, 2, 1],  [23, 3, 0],
    [24, 4, 0], [25, 2, 0],  [26, 6, 1],
    [27, 2, 1], [28, 8, 0],  [29, 9, 1],
  ];
  data.forEach(function(e) {
    e[2] = e[2] ? 'fill-color: red' : 'fill-color: blue';
  });
  data.unshift(['Student ID', 'Probability', {'type': 'string','role': 'style'}]);

  var chartData = google.visualization.arrayToDataTable(data);
  var options = {
    title: 'Students\' Final Grades',
    width: 900,
    height: 500,
    axes: {
      y: {
        'Probability': {
          label: 'Probability'
        }
      }
    }
  };

  var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
  chart.draw(chartData, options);
}

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>

https://developers.google.com/chart/interactive/docs/points
不过，我不确定这与渐变有何关系。

---

编辑：

再看一遍后，您似乎想将数据重新格式化为 3 列，Student Id、Class 1、Class 2，然后通过选项分配颜色。

第一列之后的每一列都是一个标签：

google.load("visualization", "1.1", {
  packages: ["corechart"]
});

google.setOnLoadCallback(drawChart);

function drawChart() {
  var data = [
    [0, 0, 0],  [1, 1, 0],   [2, 2, 1],
    [3, 3, 1],  [4, 4, 0],   [5, 5, 1],
    [6, 6, 0],  [7, 7, 1],   [8, 8, 0],
    [9, 9, 1],  [10, 10, 1], [11, 0, 0],
    [12, 5, 0], [13, 3, 0],  [14, 1, 1],
    [15, 5, 1], [16, 6, 0],  [17, 7, 1],
    [18, 3, 0], [19, 9, 1],  [20, 2, 1],
    [21, 2, 0], [22, 2, 1],  [23, 3, 0],
    [24, 4, 0], [25, 2, 0],  [26, 6, 1],
    [27, 2, 1], [28, 8, 0],  [29, 9, 1],
  ];
    
  var cols = [['Student ID', 'Class 1', 'Class 2']];
  var rows = data.map(function(e) {
    return e[2] ? [e[0], null, e[1]] : [e[0], e[1], null];
  });

  var chartData = google.visualization.arrayToDataTable(cols.concat(rows));
  var options = {
    title: 'Students\' Final Grades',
    width: 900,
    height: 500,
    colors: ['#ac4142', '#6a9fb5'],
    vAxis: { title:'Probability'}
  };

  var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
  chart.draw(chartData, options);
}

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>

Answer 2

看看here。

不确定我是否理解您的问题，但您可以使用“颜色”选项。

var options = {
    colors: ['blue', 'blue', 'red']
};