如何使用Google Charts向散点图的点添加渐变颜色填充？

Question

基本上，我想绘制一个具有三个系列的数据集的散点图：（1）x（2）for y（3）第三个系列仅需要0和1。

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

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

Answer 1

在这里看看。

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

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

Answer 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], ]; 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>