[英]How to add gradient color fill to the points of scatter plot using google Charts?
Basically I want to make a scatter plot of a data set with three series : (1) for x (2) for y (3) a third series which takes only 0 and 1. 基本上,我想绘制一个具有三个系列的数据集的散点图:(1)x(2)for y(3)第三个系列仅需要0和1。
I want the point with 3rd series value = 0 to appear as red while blue for the rest of the points. 我希望第三个序列值= 0的点在其余的点上显示为红色而蓝色。
I am using Google Charts, they had a color fill option in https://developers.google.com/chart/image/docs/gallery/scatter_charts but this is deprecated and is no longer used. 我使用的是Google图表,它们在https://developers.google.com/chart/image/docs/gallery/scatter_charts中具有颜色填充选项,但已弃用并且不再使用。 Can anyone provide the required commands to do the same.
任何人都可以提供所需的命令来执行相同的操作。
If I read your question correctly, you aren't trying to show the 3rd series and are just trying to set the color of the point based on that value. 如果我正确阅读了您的问题,则您不是在尝试显示第三个系列,而是在尝试根据该值设置点的颜色。 If that is correct, you can do something like this:
如果正确,则可以执行以下操作:
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 https://developers.google.com/chart/interactive/docs/points
I'm not sure how this is related to a gradient though. 我不确定这与渐变有何关系。
edit: 编辑:
After taking a second look, it seems as though you want to reformat your data into 3 columns, Student Id
, Class 1
, Class 2
, then assign colors via options. 再看一遍之后,您似乎想将数据重新格式化为3列,分别是
Student Id
, Class 1
, Class 2
,然后通过选项分配颜色。
Each column after the first will be a label: 第一列之后的每一列将是一个标签:
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.