[英]overlapping bubbles with the same size and color in scatter google visualization
[英]Bubbles chart: how to avoid bubbles being cut off? google visualization
我正在使用 google 可視化氣泡圖,數據到 x 軸和 Y 軸是動態的。 我在這里面臨的問題是氣泡被切斷並且尺寸也不均勻。
使用以下選項
options = {
'title': 'Chart',
'width': '100%',
'height': 550,
legend: {position: 'right'},
vAxis: {
title: 'Score',
viewWindow: {
min: 0,
max: 5
},
baselineColor: {
color: '#4c78c6',
},
sizeAxis : {minValue: 0, maxSize: 15},
ticks: [1, 2, 3, 4, 5]
},
hAxis: {
title: 'Years',
baselineColor: {
color: '#4c78c6',
}
},
sizeAxis : {minValue: 0, maxSize: 15},
bubble: {
textStyle: {
color: 'none',
}
},
tooltip: {
isHtml: true,
},
colors: colors,
chartArea: { width: "30%", height: "50%" }
};
編輯數據傳遞給
var rows = [
['ID','YEAR','SCORE', 'AVG1', 'AVG']
['Deka marc', 2.5, 5, '76-100%', 100]
['Max cala', 28.2,3.4,'76-100%', 77]
['shane root',4.2, 1, '0-25%', 0]
]
var data = google.visualization.arrayToDataTable(rows);
從上面的數組中,我在懸停時刪除元素 3,因為不希望在工具提示中顯示。 AVG1 列用於圖例
用
var rangeX = data.getColumnRange(1);
知道列的范圍然后使用
hAxis: {
viewWindow: {
min: rangeX.min-10,
max: rangeX.max+10
}
},
}
對 yAxis 做類似的事情
在 hAxis 內添加 viewWindow 選項。 這是一個示例代碼:
viewWindow: {
min: 0,
max: 40
}
您可以根據要顯示的數據集中的最大值更改 max。 我的意思是如果是 30(如你的例子),你可以設置最大值:40,或者如果是 75,你可以設置最大值等於 85。
JSfiddle在這里。
動態查找每個軸的范圍,使用數據表方法--> getColumnRange
那么您可以使用ticks
選項來增加范圍。
var rangeX = data.getColumnRange(1);
var ticksX = [];
for (var i = (Math.floor(rangeX.min / 10) * 10); i <= (Math.ceil(rangeX.max / 10) * 10); i = i + 10) {
ticksX.push(i);
}
var rangeY = data.getColumnRange(2);
var ticksY = [];
for (var i = Math.floor(rangeY.min) - 1; i <= Math.ceil(rangeY.max) + 1; i++) {
ticksY.push(i);
}
為了使氣泡的大小均勻,請將minSize
和maxSize
設置為相同的值。
sizeAxis : {minSize: 15, maxSize: 15},
請參閱以下工作片段...
google.charts.load('current', { packages: ['corechart'] }).then(function () { var rows = [ ['ID','YEAR','SCORE', 'AVG1', 'AVG'], ['Deka marc', 2.5, 5, '76-100%', 100], ['Max cala', 28.2,3.4,'76-100%', 77], ['shane root',4.2, 1, '0-25%', 0] ]; var data = google.visualization.arrayToDataTable(rows); var rangeX = data.getColumnRange(1); var ticksX = []; for (var i = (Math.floor(rangeX.min / 10) * 10); i <= (Math.ceil(rangeX.max / 10) * 10); i = i + 10) { ticksX.push(i); } var rangeY = data.getColumnRange(2); var ticksY = []; for (var i = Math.floor(rangeY.min) - 1; i <= Math.ceil(rangeY.max) + 1; i++) { ticksY.push(i); } var options = { title: 'Chart', width: '100%', height: 550, legend: {position: 'right'}, vAxis: { title: 'Score', baselineColor: { color: '#4c78c6', }, sizeAxis : {minSize: 15, maxSize: 15}, ticks: ticksY }, hAxis: { title: 'Years', baselineColor: { color: '#4c78c6', }, ticks: ticksX }, sizeAxis : {minSize: 10, maxSize: 10}, bubble: { textStyle: { color: 'none', } }, tooltip: { isHtml: true, }, //colors: colors, chartArea: { width: "30%", height: "50%" } }; var chart = new google.visualization.BubbleChart(document.getElementById('chart_div')); chart.draw(data, options); });
<script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div>
添加最大值和最小值之間的差異的 10%
vAxis: {
viewWindow: {
min: rangeY.min - ((+rangeY.max - rangeY.min) * 10 / 100),
max: rangeY.max + ((+rangeY.max - rangeY.min) * 10 / 100)
}
},
hAxis: {
viewWindow: {
min: rangeX.min - ((+rangeX.max - rangeX.min) * 10 / 100),
max: rangeX.max + ((+rangeX.max - rangeX.min) * 10 / 100)
}
},
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.