如何更改 google 气泡图中的气泡颜色
How to change bubble color in google bubble chart
如何更改 google 气泡图的气泡颜色？我没有从他们的 api 中找到任何灵魂。
我需要
极端气泡颜色 = 'Red' 或颜色十六进制代码
高泡颜色='Orange'或颜色十六进制代码
中气泡颜色 = 'yellow' 或颜色十六进制代码
低气泡颜色 = 'green' 或颜色十六进制代码
我给api和我的测试代码below.please检查一下，给我一个解决方案。请帮忙
Google Bubble Chart
这是google气泡图apilink
下面的测试代码：
<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>
尝试这样的事情。我从您的数据中删除了 'Level' 列，在 colorAxis 的适当数组中定义了 value/color 配对，并隐藏了相同的图例：
<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 图表，我来这里寻找相同的信息，然后自己弄明白了。如果有更好的方法，我很想学习。 :)
在我的示例（对于气泡图）中，我希望根据我的“类型”列使用不同的颜色，然后“严重性”列将使我的气泡变大或变小。
我发现最好的方法是先插入一些虚假数据，但要按照您要使用的颜色顺序插入。然后，告诉图表（使用 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'],
};
如何更改 google 气泡图的气泡颜色？我没有从他们的 api 中找到任何灵魂。
我需要
极端气泡颜色 = 'Red' 或颜色十六进制代码
高泡颜色='Orange'或颜色十六进制代码
中气泡颜色 = 'yellow' 或颜色十六进制代码
低气泡颜色 = 'green' 或颜色十六进制代码
我给api和我的测试代码below.please检查一下，给我一个解决方案。请帮忙
Google Bubble Chart 这是google气泡图apilink
下面的测试代码：
<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>
尝试这样的事情。我从您的数据中删除了 'Level' 列，在 colorAxis 的适当数组中定义了 value/color 配对，并隐藏了相同的图例：
<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 图表，我来这里寻找相同的信息，然后自己弄明白了。如果有更好的方法，我很想学习。 :)
在我的示例（对于气泡图）中，我希望根据我的“类型”列使用不同的颜色，然后“严重性”列将使我的气泡变大或变小。
我发现最好的方法是先插入一些虚假数据，但要按照您要使用的颜色顺序插入。然后，告诉图表（使用 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'],
};