Javascript 谷歌图表泡沫图表没有重叠？
我和他做了一个光荣的决定 代码如下：Javascript 谷歌图表泡沫图表没有重叠？,javascript,google-visualization,bubble-chart,Javascript,Google Visualization,Bubble Chart,我和他做了一个光荣的决定 代码如下： <!-- You are free to copy and use this sample in accordance with the terms of the Apache license (http://www.apache.org/licenses/LICENSE-2.0.html) --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w
<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['ID','X','Y','Colour','Size'],
['Ravenclaw - ISTJ',2,28,'blue',4.519342105263158],
['Ravenclaw - ISFJ',2,56,'blue',9.813428571428572],
['Ravenclaw - INFJ',2,84,'blue',4.014584415584415],
['Ravenclaw - INTJ',2,112,'blue',6.503031999999999],
['Ravenclaw - ISTP',2,140,'blue',3.180277777777778],
['Ravenclaw - ISFP',2,168,'blue',4.906714285714286],
['Ravenclaw - INFP',2,196,'blue',5.627474576271186],
['Ravenclaw - INTP',2,224,'blue',5.8676125],
['Ravenclaw - ESTP',2,252,'blue',5.7245],
['Ravenclaw - ESFP',2,280,'blue',4.293375],
['Ravenclaw - ENFP',2,308,'blue',3.816333333333333],
['Ravenclaw - ENTP',2,336,'blue',5.7245],
['Ravenclaw - ESTJ',2,364,'blue',7.155625],
['Ravenclaw - ESFJ',2,392,'blue',6.542285714285715],
['Ravenclaw - ENFJ',2,420,'blue',2.453357142857143],
['Ravenclaw - ENTJ',2,448,'blue',2.2898],
['Hufflepuff - ISTJ',5,28,'yellow',8.803913192071086],
['Hufflepuff - ISFJ',5,56,'yellow',2.655148423005566],
['Hufflepuff - INFJ',5,84,'yellow',9.655085174565695],
['Hufflepuff - INTJ',5,112,'yellow',2.379012987012987],
['Hufflepuff - ISTP',5,140,'yellow',4.13023088023088],
['Hufflepuff - ISFP',5,168,'yellow',10.620593692022263],
['Hufflepuff - INFP',5,196,'yellow',8.820493066255777],
['Hufflepuff - INTP',5,224,'yellow',3.252556818181818],
['Hufflepuff - ESTP',5,252,'yellow',6.195346320346321],
['Hufflepuff - ESFP',5,280,'yellow',9.293019480519481],
['Hufflepuff - ENFP',5,308,'yellow',2.478138528138528],
['Hufflepuff - ENTP',5,336,'yellow',4.37318563789152],
['Hufflepuff - ESTJ',5,364,'yellow',0],
['Hufflepuff - ESFJ',5,392,'yellow',10.620593692022263],
['Hufflepuff - ENFJ',5,420,'yellow',5.310296846011132],
['Hufflepuff - ENTJ',5,448,'yellow',3.717207792207792],
['Gryffindor - ISTJ',8,28,'Red',3.423744019138756],
['Gryffindor - ISFJ',8,56,'Red',1.858603896103896],
['Gryffindor - INFJ',8,84,'Red',5.744775678866588],
['Gryffindor - INTJ',8,112,'Red',3.538781818181818],
['Gryffindor - ISTP',8,140,'Red',8.673484848484847],
['Gryffindor - ISFP',8,168,'Red',0],
['Gryffindor - INFP',8,196,'Red',4.851271186440678],
['Gryffindor - INTP',8,224,'Red',5.52934659090909],
['Gryffindor - ESTP',8,252,'Red',0],
['Gryffindor - ESFP',8,280,'Red',9.757670454545455],
['Gryffindor - ENFP',8,308,'Red',13.010227272727272],
['Gryffindor - ENTP',8,336,'Red',6.122459893048127],
['Gryffindor - ESTJ',8,364,'Red',3.252556818181818],
['Gryffindor - ESFJ',8,392,'Red',0],
['Gryffindor - ENFJ',8,420,'Red',11.151623376623377],
['Gryffindor - ENTJ',8,448,'Red',7.806136363636362],
['Slytherin - ISTJ',11,28,'green',6.917360365198712],
['Slytherin - ISFJ',11,56,'green',0],
['Slytherin - INFJ',11,84,'green',4.930989928438907],
['Slytherin - INTJ',11,112,'green',6.775938775510204],
['Slytherin - ISTP',11,140,'green',8.11295351473923],
['Slytherin - ISFP',11,168,'green',8.344752186588922],
['Slytherin - INFP',11,196,'green',2.475138360428917],
['Slytherin - INTP',11,224,'green',5.47624362244898],
['Slytherin - ESTP',11,252,'green',9.735544217687076],
['Slytherin - ESFP',11,280,'green',0],
['Slytherin - ENFP',11,308,'green',2.920663265306123],
['Slytherin - ENTP',11,336,'green',4.295093037214887],
['Slytherin - ESTJ',11,364,'green',7.301658163265307],
['Slytherin - ESFJ',11,392,'green',4.172376093294461],
['Slytherin - ENFJ',11,420,'green',6.258564139941692],
['Slytherin - ENTJ',11,448,'green',11.682653061224489]
]);
var options = {
title: 'Correlation between MBTI Type and Harry Potter House (Google docs survey)',
hAxis: {title: 'House'},
vAxis: {title: 'Type'},
bubble: {textStyle: {fontSize: 11}}
};
// Create and draw the visualization.
var chart = new google.visualization.BubbleChart(
document.getElementById('visualization'));
chart.draw(data, options);
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<a href="http://goo.gl/fzOxy">Google Docs Survey</a>
<div id="visualization" style="width: 600px; height: 400px;"></div>
</body>
</html>
如何做到这一点？如果你想避免气泡重叠，即使是将气泡缩小到合理的程度，你也需要将图表设置得非常高。为什么要使用气泡图？这使得实际比较气泡的大小变得非常困难。例如，您可以制作一个条形图，显示16种不同类型的房屋，每个房屋都有一个条形图，比较每个房屋中的ENFJ或其他类型的数量，或者按房屋划分的16种类型，允许按房屋划分的个性类型进行比较。一般来说，我们很难比较圆的大小。我们是在比较面积还是直径？但在酒吧的高度，尤其是在彼此相邻的地方，表现出色。