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

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

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

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

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

这是我的密码：

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'
        }
    }

函数绘图图（）{
var data=new google.visualization.DataTable（）；
data.addColumn（'number'，'Probabilità'）；
data.addColumn（“数量”、“影响率”）；
addColumn（{'type'：'string'，'role'：'style'}）；
addColumn（{type:'string'，role:'annotation'}）；
addColumn（{type:'string'，role:'tooltip'}）；
data.addRows([
[3,2，'点{大小：10；填充颜色：蓝色}'，'a'，'c']，[3,2，'点{大小：10；填充颜色：蓝色}'，'b'，'d']
]);
变量选项={
标题：“Rischio Finanziario”，
hAxis:{title:'Probabilità'，ticks:[0.5,1,1.5,2,2.5,3,3.5]，textStyle:{color:'999'，bold:'1'}，
变量：{title:'Impact Rate'，ticks:[0.5,1,1.5,2,2.5,3,3.5]，textStyle:{color:'999'，bold:'1'}，
身高：500，
图表区：{左：“10%”，顶：“10%”，宽：“80%”，高：“80%”，
图例：{位置：'无'}，
颜色轴：{图例：{位置：'none'}}，
气泡：{textStyle:{fontSize:11}}，
动画：{easing:'in'}，
};
if（data.getNumberOfRows（）>0）{
var chart=new google.visualization.ScatterChart（document.getElementById（'drawChart'）；
图表绘制（数据、选项）；
}否则{
document.getElementById（'drawChart'）。innerHTML='Hello WorldNo Data'
}
}

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

---

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

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

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

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

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

请参阅以下工作片段

google.charts.load（'current'{
软件包：['corechart']
}).然后（图纸）；
函数绘图图（）{
var data=new google.visualization.DataTable（）；
data.addColumn（'number'，'Probabilità'）；
data.addColumn（“数量”、“影响率”）；
addColumn（{'type'：'string'，'role'：'style'}）；
addColumn（{type:'string'，role:'annotation'}）；
addColumn（{type:'string'，role:'tooltip'}）；
data.addRows([
[3,2，'点{大小：20；填充颜色：红色}'，'a'，'c']，
[3,2，'点{大小：10；填充颜色：蓝色}'，'b'，'d']
]);
变量选项={
标题：“Rischio Finanziario”，
hAxis:{title:'Probabilità'，ticks:[0.5,1,1.5,2,2.5,3,3.5]，textStyle:{color:'999'，bold:'1'}，
变量：{title:'Impact Rate'，ticks:[0.5,1,1.5,2,2.5,3,3.5]，textStyle:{color:'999'，bold:'1'}，
身高：500，
图表区：{左：“10%”，顶：“10%”，宽：“80%”，高：“80%”，
图例：{位置：'无'}，
颜色轴：{图例：{位置：'none'}}，
气泡：{textStyle:{fontSize:11}}，
动画：{easing:'in'}，
};
if（data.getNumberOfRows（）>0）{
var chart=new google.visualization.ScatterChart（document.getElementById（'drawChart'）；
图表绘制（数据、选项）；
}否则{
document.getElementById（'drawChart'）。innerHTML='Hello WorldNo Data'
}
}

使用散点图，您可以使用样式更改点的大小role@WhiteHat我使用它的点和点大小，但没有改变。只有我能设法改变所有相同大小的点。你有这方面的示例代码吗？@WhiteHat基于此，不可能对散点图使用样式。谢谢，也许我解释得不好。我有相同大小、颜色和位置的圆圈。它们重叠。我有一个所有点的默认颜色，现在我想如果有重叠，这个颜色会改变，以通知用户重叠的存在，或者至少以某种方式我可以显示有重叠。在气泡图中，颜色会稍微褪色，所以用户可以理解。但在“散射”中，仅显示顶部圆的颜色。这就是问题所在。注释也会重叠。由于有时可能有超过4个重叠的精确点，所以级数解是不可行的。当然，没有任何选项可以为您完成所有这些。您可以根据需要拥有任意多个系列。听起来在绘制图表之前，您需要一个例程来确定哪些点将重叠。这将允许您确定该点是否需要新系列。你也可以在样式中添加一个不透明度属性，以便将一个点显示为褪色。你知道另一个像google Visualization这样简单的库，可以做我想做的事情吗。例如，TUI chart正在进行淡入淡出，但没有很好的文档可用于我的代码。不，对不起，主要是与google charts一起工作，在chart.js方面经验有限