我已经实现了谷歌气泡图，它工作正常，但我需要更改基于气泡/图例颜色的区域值。
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['corechart']});
</script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
</div>
<script language = "JavaScript">
function drawChart() {
var data = google.visualization.arrayToDataTable([
['ID', 'Life Expectancy', 'Fertility Rate', 'Area', ],
['CAN', 80.66, 1.67, 'Europe',],
['DEU', 79.84, 1.36, 'Europe' ],
['IRN', 72.49, 1.7, 'Middle East' ],
['IRQ', 68.09, 4.77, 'Middle East' ],
['ISR', 81.55, 2.96, 'Middle East' ],
['RUS', 68.6, 1.54, 'Europe', ],
['USA', 78.09, 2.05, 'North America']
]);
// Set chart options
var options = {
'title':'Age vs Weight',
'width':550,
'height':400,
legend: {
position : 'right'
},
colors: ['green', 'yellow','red','black']
};
// Instantiate and draw the chart.
var chart = new google.visualization.BubbleChart(document.getElementById('container'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
google.charts.load('current',{'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>
curretly 颜色已设置但其随机颜色设置。我想将欧洲设置为红色，中东设置为绿色，北美设置为黄色
我无法找到可视化选项:气泡图，但对于 Column Chart 可以使用，例如。
var data = google.visualization.arrayToDataTable([
['Element', 'Density', { role: 'style' }],
['Copper', 8.94, '#b87333'], // RGB value
['Silver', 10.49, 'silver'], // English color name
['Gold', 19.30, 'gold'],
['Platinum', 21.45, 'color: #e5e4e2' ], // CSS-style declaration
]);
bubble chart adding style in array 是否有类似的选项
最佳答案
data format BubbleChart 不允许 column roles ，例如'style'
但是，您可以使用 colors 选项控制颜色分配。
colors 数组中的颜色，应该与数据中出现的系列的顺序相同。
由于 'Europe' 首先出现，'Middle East' 第二，最后 'North America'，
颜色应按以下顺序...
colors: ['red', 'green', 'yellow']
请参阅以下工作片段...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['ID', 'Life Expectancy', 'Fertility Rate', 'Area'],
['CAN', 80.66, 1.67, 'Europe'],
['DEU', 79.84, 1.36, 'Europe'],
['IRN', 72.49, 1.70, 'Middle East'],
['IRQ', 68.09, 4.77, 'Middle East'],
['ISR', 81.55, 2.96, 'Middle East'],
['RUS', 68.6, 1.54, 'Europe'],
['USA', 78.09, 2.05, 'North America']
]);
// Set chart options
var options = {
title: 'Age vs Weight',
width: 550,
height: 400,
legend: {
position : 'right'
},
colors: ['red', 'green', 'yellow']
};
var chart = new google.visualization.BubbleChart(document.getElementById('container'));
chart.draw(data, options);
});<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="container"></div>编辑
要处理动态数据，使用对象将颜色映射到区域...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['ID', 'Life Expectancy', 'Fertility Rate', 'Area'],
['USA', 78.09, 2.05, 'North America'],
['IRN', 72.49, 1.70, 'Middle East'],
['CAN', 80.66, 1.67, 'Europe'],
['DEU', 79.84, 1.36, 'Europe'],
['IRQ', 68.09, 4.77, 'Middle East'],
['ISR', 81.55, 2.96, 'Middle East'],
['RUS', 68.6, 1.54, 'Europe'],
]);
var colorMap = {
'Europe': 'red',
'Middle East': 'green',
'North America': 'yellow'
};
var colors = [];
for (var i = 0; i < data.getNumberOfRows(); i++) {
var area = data.getValue(i, 3);
if (colors.indexOf(colorMap[area]) === -1) {
colors.push(colorMap[area]);
}
}
var options = {
title: 'Age vs Weight',
width: 550,
height: 400,
legend: {
position : 'right'
},
colors: colors
};
var chart = new google.visualization.BubbleChart(document.getElementById('container'));
chart.draw(data, options);
});<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="container"></div>关于javascript - 谷歌可视化气泡图根据值更改图例颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56629753/