我如何更改Google Bubble Chart Bubble Color？。我没有从其API中找到任何灵魂。
我需要
极端气泡颜色='红色'或颜色十六进制代码
高气泡颜色="橙色"或颜色六角形代码
中型气泡颜色="黄色"或颜色六角形代码
低气泡颜色='绿色'或颜色六角形代码
我在下面提供API和我的测试代码。请检查并给我解决方案。请帮助
Google Bubble图表这是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>
在我的示例中(对于气泡图(，我想要基于" type"的不同颜色。列，然后是"严重性"列会使我的气泡大或小。
我发现这样做的最好方法是首先插入一些伪造的数据，但按照您要使用的颜色顺序。然后，告诉图形(使用haxis.viewwindow.max＆amp; min以及vaxis.viewwindow.max＆amp; 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'],
};
尝试这样的东西。我从您的数据中删除了"级别"列，定义了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>
如果有帮助，请告诉我。今天是我第一次使用Google图表，我来到这里寻找相同的信息，然后自行解决。如果有更好的方法，我渴望学习。：(