如何更改谷歌泡泡图泡泡颜色？.i没有从他们的api中找到任何灵魂。
我需要
极端气泡颜色=＆＃39;红色＆＃39;或颜色十六进制代码
高泡色=＆＃39;橙色＆＃39;或颜色十六进制代码
中等气泡颜色=＆＃39;黄色＆＃39;或颜色十六进制代码
低气泡颜色=＆＃39;绿色＆＃39;或颜色十六进制代码
我在下面给api和我的测试代码。请检查并给我一个解决方案。请帮忙
Google Bubble Chart 这是谷歌泡泡图api链接
下面的测试代码：
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawSeriesChart);
function drawSeriesChart() {
var data = google.visualization.arrayToDataTable([
['core', 'Xscore', 'Yscore', 'Level', 'Size'],
['12.00', 6, 6, 'EXTREME', 4],
['4.84', 2.84, 1.36, 'MEDIUM', 2],
['6.6', 5.6, 1.84, 'HIGH', 3],
['7.73', 5.73, 2.78, 'HIGH', 3],
['7.05', 5.05, 2, 'MEDIUM', 2],
['4.49', 3.49, 1.7, 'LOW', 1],
['9.09', 4.09, 4.77, 'HIGH', 3],
['4.55', 2.55, 2.96, 'LOW', 1],
['4.6', 2.6, 1.54, 'LOW', 1],
['6', 3.6, 2.54, 'MEDIUM', 2],
['7.6', 3.6, 3.54, 'HIGH', 3],
['7.6', 3.6, 3.54, 'HIGH', 3],
['7.7', 3.6, 3.54, 'HIGH', 3],
['10.6', 5.6, 4.54, 'HIGH', 3],
['6.6', 4.6, 1.24, 'MEDIUM', 2],
['3.6', 1.6, 1.34, 'LOW', 1],
['6.6', 1.6, 5.14, 'HIGH', 3],
['7.7', 1.7, 5.54, 'HIGH', 3],
['6.8', 1.8, 4.54, 'HIGH', 3],
['11.6', 5.6, 5.54, 'EXTREME', 4],
['7.09', 5.09, 2.05, 'HIGH', 3]
]);
var options = {
title: '',
backgroundColor: 'transparent',
hAxis: {title: 'Xscore', ticks: [1,2,3,4,5,6], textStyle:{color:'#999',bold:'1'},gridlines: {color: '#696966'},titleTextStyle:{italic:'0'}},
vAxis: {title: 'Yscore', ticks: [1,2,3,4,5,6],textStyle:{color:'#999',bold:'1'},gridlines: {color: '#696966'},titleTextStyle:{italic:'0'}},
bubble: {textStyle: {fontSize: 9,color:'#FFFFFF',auraColor:'none'}},
chartArea:{backgroundColor:'#4c4c4b'},
legend: { position: 'none' },
animation:{easing:'in'}
};
var chart = new google.visualization.BubbleChart(document.getElementById('series_chart_div'));
chart.draw(data, options);
}
</script>
<div class="widget-content shortcuts">
<div id="series_chart_div" style="width: 100%; height: 800px;"></div>
</div>
答案 0 :(得分：0)
尝试这样的事情。我从数据中删除了“Level”列，在colorAxis中的相应数组中定义了值/颜色配对，并隐藏了相同的图例：
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawSeriesChart);
function drawSeriesChart() {
var data = google.visualization.arrayToDataTable([
['core', 'Xscore', 'Yscore', 'Size'],
['12.00', 6, 6, 4],
['4.84', 2.84, 1.36, 2],
['6.6', 5.6, 1.84, 3],
['7.73', 5.73, 2.78, 3],
['7.05', 5.05, 2, 2],
['4.49', 3.49, 1.7, 1],
['9.09', 4.09, 4.77, 3],
['4.55', 2.55, 2.96, 1],
['4.6', 2.6, 1.54, 1],
['6', 3.6, 2.54, 2],
['7.6', 3.6, 3.54, 3],
['7.6', 3.6, 3.54, 3],
['7.7', 3.6, 3.54, 3],
['10.6', 5.6, 4.54, 3],
['6.6', 4.6, 1.24, 2],
['3.6', 1.6, 1.34, 1],
['6.6', 1.6, 5.14, 3],
['7.7', 1.7, 5.54, 3],
['6.8', 1.8, 4.54, 3],
['11.6', 5.6, 5.54, 4],
['7.09', 5.09, 2.05, 3]
]);
var options = {
title: '',
backgroundColor: 'transparent',
hAxis: {title: 'Xscore', ticks: [1,2,3,4,5,6], textStyle:{color:'#999',bold:'1'},gridlines: {color: '#696966'},titleTextStyle:{italic:'0'}},
vAxis: {title: 'Yscore', ticks: [1,2,3,4,5,6],textStyle:{color:'#999',bold:'1'},gridlines: {color: '#696966'},titleTextStyle:{italic:'0'}},
bubble: {textStyle: {fontSize: 9,color:'#FFFFFF',auraColor:'none'}},
colorAxis: {values: [1, 2, 3, 4], colors: ['green', 'yellow', 'orange', 'red'], legend: {position: 'none'}},
chartArea:{backgroundColor:'#4c4c4b'},
legend: { position: 'none' },
animation:{easing:'in'}
};
var chart = new google.visualization.BubbleChart(document.getElementById('series_chart_div'));
chart.draw(data, options);
}
</script>
<div class="widget-content shortcuts">
<div id="series_chart_div" style="width: 100%; height: 800px;"></div>
</div>
如果有帮助，请告诉我。今天是我第一次使用谷歌图表，我来到这里寻找相同的信息，然后我自己想出来。如果有更好的方法，我渴望学习。 ：）
答案 1 :(得分：0)
在我的示例中（对于气泡图），我希望基于“类型”列使用不同的颜色，然后“严重性”列会使气泡变大或变小。
我发现做到这一点的最佳方法是先插入一些虚假数据，但要按要使用的颜色顺序。然后，告诉图形（使用hAxis.viewWindow.max和min以及vAxis.viewWindow.max和min）不要显示虚假的数据点。
示例：
var data = google.visualization.arrayToDataTable([
['ID', 'Value', 'OtherVal', 'Type', 'Severity'],
// First, set some bogus, just so we can establish color (in order) for the 'Type' column.
['', 0, 0, 'Strategic', 1],
['', 0, 0, 'Financial', 2],
['', 0, 0, 'Compliance', 3],
['', 0, 0, 'Operational', 4],
['', 0, 0, 'Reputational', 5],
// We can now put in our "real" data....
['', 5001, 100, 'Strategic', 1],
['', 5002.2, 101, 'Financial', 2],
['', 5002.7, 101, 'Compliance', 5],
['', 5004, 103, 'Operational', 4],
['', 5005, 104, 'Reputational', 2],
['', 5005.4, 105, 'Compliance', 2],
['', 5005.1, 106, 'Financial', 2],
['', 5008, 105, 'Strategic', 4],
['', 5009, 108, 'Compliance', 4],
['', 5009.1, 109, 'Operational', 2],
['', 5011, 104, 'Operational', 2],
['', 5012, 102, 'Operational', 4]
]);
当我们为图表创建选项时，请确保指定颜色，并且在数据点之前不显示任何内容。
var options = {
title: 'Incidents by Department',
hAxis: {viewWindow: {min: 5000, max: 5013}},
vAxis: {viewWindow: {min: 99, max: 110}},
colors: ['black', 'darkgreen', '#B22222', '#888', 'purple'],
};