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

Question

基本上我想用三个系列制作数据集的散点图：（1）x（2）y（3）第三个系列只有0和1。

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

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

Answer 1

看看here。

不确定我是否理解你的问题，但你可以使用'colors'选项。

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

Answer 2

如果我正确地阅读了您的问题，您不会尝试显示第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>