系列 pointShape 是否适用于 Google 散点图?
Does series pointShape work for the Google scatter chart?
我正在使用 scatter chart from the Google visualization plugin,我正在尝试:
- 让每个点的颜色不同
- 每个点的形状都不一样。
我在这里看到了这个通用建议并尝试了这个:
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Age', 'Weight'],
[8, 12],
[4, 5.5],
[11, 14],
[4, 5],
[3, 3.5],
[6.5, 7]
]);
var options = {
series: {
0: { pointShape: 'circle' },
1: { pointShape: 'triangle' },
2: { pointShape: 'square' },
3: { pointShape: 'diamond' },
4: { pointShape: 'star' },
5: { pointShape: 'polygon' }
},
pointSize: 28,
chartArea:{left:10,top:0,width:"96%",height:"92%"},
'backgroundColor': 'transparent',
hAxis: {
baselineColor: 'transparent',
gridlineColor: 'transparent',
textPosition: 'none', minValue: 0, maxValue: 15
},
vAxis: {
baselineColor: 'transparent',
gridlineColor: 'transparent',
textPosition: 'none', minValue: 0, maxValue: 15
},
gridlines: {
color: 'transparent'
},
legend: 'none'
};
但它似乎不适用于散点图。
散点图是否支持每个点具有不同颜色和形状的功能?
每个系列都分配到一列:
series.0
= 数据
中的列 1
series.1
= 数据
中的第 2
列
等...
由于提供的 data
只有一个 Y 轴 列,所以所有点都属于 series.0
--> pointShape: 'circle'
.
添加列并用 null
填充其余部分以更改形状
每个点。请参阅以下工作片段...
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Age', 'Weight', 'Weight', 'Weight', 'Weight', 'Weight', 'Weight'],
[8, 12, null, null, null, null, null],
[4, null, 5.5, null, null, null, null],
[11, null, null, 14, null, null, null],
[4, null, null, null, 5, null, null],
[3, null, null, null, null, 3.5, null],
[6.5, null, null, null, null, null, 7]
]);
var options = {
series: {
0: { pointShape: 'circle' },
1: { pointShape: 'triangle' },
2: { pointShape: 'square' },
3: { pointShape: 'diamond' },
4: { pointShape: 'star' },
5: { pointShape: 'polygon' }
},
pointSize: 28,
chartArea:{left:10,top:0,width:"96%",height:"92%"},
'backgroundColor': 'transparent',
hAxis: {
baselineColor: 'transparent',
gridlineColor: 'transparent',
textPosition: 'none', minValue: 0, maxValue: 15
},
vAxis: {
baselineColor: 'transparent',
gridlineColor: 'transparent',
textPosition: 'none', minValue: 0, maxValue: 15
},
gridlines: {
color: 'transparent'
},
legend: 'none'
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
我正在使用 scatter chart from the Google visualization plugin,我正在尝试:
- 让每个点的颜色不同
- 每个点的形状都不一样。
我在这里看到了这个通用建议并尝试了这个:
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Age', 'Weight'],
[8, 12],
[4, 5.5],
[11, 14],
[4, 5],
[3, 3.5],
[6.5, 7]
]);
var options = {
series: {
0: { pointShape: 'circle' },
1: { pointShape: 'triangle' },
2: { pointShape: 'square' },
3: { pointShape: 'diamond' },
4: { pointShape: 'star' },
5: { pointShape: 'polygon' }
},
pointSize: 28,
chartArea:{left:10,top:0,width:"96%",height:"92%"},
'backgroundColor': 'transparent',
hAxis: {
baselineColor: 'transparent',
gridlineColor: 'transparent',
textPosition: 'none', minValue: 0, maxValue: 15
},
vAxis: {
baselineColor: 'transparent',
gridlineColor: 'transparent',
textPosition: 'none', minValue: 0, maxValue: 15
},
gridlines: {
color: 'transparent'
},
legend: 'none'
};
但它似乎不适用于散点图。
散点图是否支持每个点具有不同颜色和形状的功能?
每个系列都分配到一列:
series.0
= 数据
中的列 1
series.1
= 数据
中的第 2
列
等...
由于提供的 data
只有一个 Y 轴 列,所以所有点都属于 series.0
--> pointShape: 'circle'
.
添加列并用 null
填充其余部分以更改形状
每个点。请参阅以下工作片段...
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Age', 'Weight', 'Weight', 'Weight', 'Weight', 'Weight', 'Weight'],
[8, 12, null, null, null, null, null],
[4, null, 5.5, null, null, null, null],
[11, null, null, 14, null, null, null],
[4, null, null, null, 5, null, null],
[3, null, null, null, null, 3.5, null],
[6.5, null, null, null, null, null, 7]
]);
var options = {
series: {
0: { pointShape: 'circle' },
1: { pointShape: 'triangle' },
2: { pointShape: 'square' },
3: { pointShape: 'diamond' },
4: { pointShape: 'star' },
5: { pointShape: 'polygon' }
},
pointSize: 28,
chartArea:{left:10,top:0,width:"96%",height:"92%"},
'backgroundColor': 'transparent',
hAxis: {
baselineColor: 'transparent',
gridlineColor: 'transparent',
textPosition: 'none', minValue: 0, maxValue: 15
},
vAxis: {
baselineColor: 'transparent',
gridlineColor: 'transparent',
textPosition: 'none', minValue: 0, maxValue: 15
},
gridlines: {
color: 'transparent'
},
legend: 'none'
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>