我正在制作 google 个条形图,我无法为单个条形图添加颜色
i am working on google bar charts, i am stuck with adding colours to individual bars
<!DOCTYPE html>
<html lang="en-US">
<body>
<h1>My Web Page</h1>
<div id="piechart"></div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Load google charts
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
// Draw the chart and set the chart values
var a = [['Work', 8], ['Eat', 2], ['TV', 4], ['Gym', 2], ['Sleep', 8], ['walk', 2], ['games', 2], ['chess', 2], ['drink', 4], ['dance', 6]];
a.sort(compareSecondColumn);
function compareSecondColumn(a, b) {
if (a[1] === b[1]) {
return 0;
}
else {
return (a[1] > b[1]) ? -1 : 1;
}
}
// Draw the chart and set the chart values
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],a[0],a[1],a[2],a[3],a[4]
]);
// Optional; add a title and set the width and height of the chart
var options = { 'title': 'the title', 'width': 550, 'height': 400 };
// Display the chart inside the <div> element with id="piechart"
var chart = new google.visualization.ColumnChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
</body>
</html>
- 我正在使用条形图,它只显示默认的蓝色。
- 我使用了一个数组,它删除了没有数据的列(比如 0)
- 喜欢整理数据
- 我想为每一列显示单独的颜色
- 像红色,绿色,每个条形的任何不同颜色
- 我也喜欢添加注释
- 提前致谢
上面评论中的列标题和值在这里似乎工作正常...
所做的唯一更改...
- 将
type
属性 添加到样式和注释角色。
- 为样式角色添加了不同的颜色。
请参阅以下工作片段...
var a = [['Work', 8, "#E53935", 8], ['Eat', 2, "#1E88E5", 2], ['TV', 4, "#43A047", 4]];
a.sort(compareSecondColumn);
function compareSecondColumn(a, b) {
if (a[1] === b[1]) {
return 0;
}
else {
return (a[1] > b[1]) ? -1 : 1;
}
}
google.charts.load('current', {
packages: ['corechart']
}).then(function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day', {role: 'style', type: 'string'}, {role: 'annotation', type: 'number'}],a[0],a[1],a[2]
]);
var options = {
title: 'the title',
width: 550,
height: 400,
legend: 'none'
};
var chart = new google.visualization.ColumnChart(document.getElementById('piechart'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="piechart"></div>
<!DOCTYPE html>
<html lang="en-US">
<body>
<h1>My Web Page</h1>
<div id="piechart"></div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Load google charts
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
// Draw the chart and set the chart values
var a = [['Work', 8], ['Eat', 2], ['TV', 4], ['Gym', 2], ['Sleep', 8], ['walk', 2], ['games', 2], ['chess', 2], ['drink', 4], ['dance', 6]];
a.sort(compareSecondColumn);
function compareSecondColumn(a, b) {
if (a[1] === b[1]) {
return 0;
}
else {
return (a[1] > b[1]) ? -1 : 1;
}
}
// Draw the chart and set the chart values
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],a[0],a[1],a[2],a[3],a[4]
]);
// Optional; add a title and set the width and height of the chart
var options = { 'title': 'the title', 'width': 550, 'height': 400 };
// Display the chart inside the <div> element with id="piechart"
var chart = new google.visualization.ColumnChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
</body>
</html>
- 我正在使用条形图,它只显示默认的蓝色。
- 我使用了一个数组,它删除了没有数据的列(比如 0)
- 喜欢整理数据
- 我想为每一列显示单独的颜色
- 像红色,绿色,每个条形的任何不同颜色
- 我也喜欢添加注释
- 提前致谢
上面评论中的列标题和值在这里似乎工作正常...
所做的唯一更改...
- 将
type
属性 添加到样式和注释角色。 - 为样式角色添加了不同的颜色。
请参阅以下工作片段...
var a = [['Work', 8, "#E53935", 8], ['Eat', 2, "#1E88E5", 2], ['TV', 4, "#43A047", 4]];
a.sort(compareSecondColumn);
function compareSecondColumn(a, b) {
if (a[1] === b[1]) {
return 0;
}
else {
return (a[1] > b[1]) ? -1 : 1;
}
}
google.charts.load('current', {
packages: ['corechart']
}).then(function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day', {role: 'style', type: 'string'}, {role: 'annotation', type: 'number'}],a[0],a[1],a[2]
]);
var options = {
title: 'the title',
width: 550,
height: 400,
legend: 'none'
};
var chart = new google.visualization.ColumnChart(document.getElementById('piechart'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="piechart"></div>