散射谷歌可视化中大小和颜色相同的重叠气泡

Question

我正在绘制一个谷歌散点图，我有许多大小、颜色和位置相同的气泡重叠。在谷歌气泡图中，重叠的气泡会自动改变颜色以通知用户。但在散点图中显示了顶部气泡的颜色。

注意：我不能使用气泡图，因为我需要自定义的工具提示。

注意：我不能使用谷歌散点图，因为我想动态调整气泡的大小。

知道怎么解决这个问题吗？

这是我的代码：

function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Probabilità');
data.addColumn('number', 'Impact Rate');
data.addColumn({'type': 'string', 'role': 'style'} );
data.addColumn({type:'string', role:'annotation'});
data.addColumn({type: 'string', role: 'tooltip'});
data.addRows([
[3, 2, 'point {size: 10;fill-color:blue}', 'a','c'],[3,2,'point {size: 10;fill-color:blue}','b','d']
]);
var options = {
title: 'Rischio Finanziario',
hAxis: {title: 'Probabilità', ticks: [0.5,1,1.5,2,2.5,3,3.5], textStyle:{color:'#999',bold:'1'}},
vAxis: {title: 'Impact Rate', ticks: [0.5,1,1.5,2,2.5,3,3.5],textStyle:{color:'#999',bold:'1'}},
height: 500,
chartArea:{left:"10%",top:"10%",width:"80%",height:"80%"},
legend: {position: 'none'},
colorAxis: {legend: {position: 'none'}},
bubble: {textStyle: {fontSize: 11}},
animation:{easing:'in'},
};
if (data.getNumberOfRows() > 0) {
var chart = new google.visualization.ScatterChart(document.getElementById('drawChart'));
chart.draw(data, options);
} else {
document.getElementById('drawChart').innerHTML = '<div><h4 style="color: black;margin-top: 2rem;">Hello World</h4></div>No Data'
}
}

这是一个简化版本。事实上，我用jinja动态获取数据，并使用for循环

Answer 1

使用散点图，您可以根据样式角色更改点的大小。

您已经在发布的示例中正确定义了它。

point {size: 10; fill-color:blue}

如果希望点的大小不同，
只需更改大小属性即可。

point {size: 20; fill-color:blue}

请参阅以下工作片段。。。

google.charts.load('current', {
packages: ['corechart']
}).then(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Probabilità');
data.addColumn('number', 'Impact Rate');
data.addColumn({'type': 'string', 'role': 'style'} );
data.addColumn({type:'string', role:'annotation'});
data.addColumn({type: 'string', role: 'tooltip'});
data.addRows([
[3, 2, 'point {size: 20; fill-color: red}', 'a', 'c'],
[3, 2, 'point {size: 10; fill-color: blue}', 'b', 'd']
]);
var options = {
title: 'Rischio Finanziario',
hAxis: {title: 'Probabilità', ticks: [0.5,1,1.5,2,2.5,3,3.5], textStyle:{color:'#999',bold:'1'}},
vAxis: {title: 'Impact Rate', ticks: [0.5,1,1.5,2,2.5,3,3.5],textStyle:{color:'#999',bold:'1'}},
height: 500,
chartArea:{left:"10%",top:"10%",width:"80%",height:"80%"},
legend: {position: 'none'},
colorAxis: {legend: {position: 'none'}},
bubble: {textStyle: {fontSize: 11}},
animation:{easing:'in'},
};
if (data.getNumberOfRows() > 0) {
var chart = new google.visualization.ScatterChart(document.getElementById('drawChart'));
chart.draw(data, options);
} else {
document.getElementById('drawChart').innerHTML = '<div><h4 style="color: black;margin-top: 2rem;">Hello World</h4></div>No Data'
}
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="drawChart"></div>

---

如果您想处理重叠的注释，
您可以使用多个系列或数据表列，
然后更改每个系列的注释词干的长度。

series: {
0: {
annotations: {
stem: {
length: 26
}
}
},
1: {
annotations: {
stem: {
length: 12
}
}
}
},

请参阅以下工作片段。。。

google.charts.load('current', {
packages: ['corechart']
}).then(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Probabilità');
data.addColumn('number', 'Impact Rate');
data.addColumn({'type': 'string', 'role': 'style'} );
data.addColumn({type:'string', role:'annotation'});
data.addColumn({type: 'string', role: 'tooltip'});
data.addColumn('number', 'Impact Rate');
data.addColumn({'type': 'string', 'role': 'style'} );
data.addColumn({type:'string', role:'annotation'});
data.addColumn({type: 'string', role: 'tooltip'});
data.addRows([
[3, 2, 'point {size: 20; fill-color: red}', 'a', 'c', null, null, null, null],
[3, null, null, null, null, 2, 'point {size: 10; fill-color: blue}', 'b', 'd']
]);
var options = {
series: {
0: {
annotations: {
stem: {
length: 26
}
}
},
1: {
annotations: {
stem: {
length: 12
}
}
}
},
title: 'Rischio Finanziario',
hAxis: {title: 'Probabilità', ticks: [0.5,1,1.5,2,2.5,3,3.5], textStyle:{color:'#999',bold:'1'}},
vAxis: {title: 'Impact Rate', ticks: [0.5,1,1.5,2,2.5,3,3.5],textStyle:{color:'#999',bold:'1'}},
height: 500,
chartArea:{left:"10%",top:"10%",width:"80%",height:"80%"},
legend: {position: 'none'},
colorAxis: {legend: {position: 'none'}},
bubble: {textStyle: {fontSize: 11}},
animation:{easing:'in'},
};
if (data.getNumberOfRows() > 0) {
var chart = new google.visualization.ScatterChart(document.getElementById('drawChart'));
chart.draw(data, options);
} else {
document.getElementById('drawChart').innerHTML = '<div><h4 style="color: black;margin-top: 2rem;">Hello World</h4></div>No Data'
}
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="drawChart"></div>