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

Question

基本上，我想绘制包含三个系列的数据集的散点图:(1) 代表 x (2) 代表 y (3) 第三个系列，仅需要 0 和 1。

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

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

Answer 1

如果我正确地阅读了您的问题，您不会尝试显示第三个系列，而只是尝试根据该值设置点的颜色。如果这是正确的，您可以执行以下操作:

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>