柱形图中每列的 ng-谷歌图表自定义颜色
ng-google-chart custom color for each column in column chart
我正在使用ng-google-charts模块为我的角度应用程序构建google图表,我正在尝试做的是绘制柱形图。
代码工作图表似乎绘制正确,但我无法弄清楚如何在我生成的行中添加颜色,以便每列的颜色不同。
这是我的代码,查看谷歌图表文档,似乎我应该能够为每列分配一个十六进制代码,但我看到的示例都没有使用 angular ,也没有一个像我需要的那样将它们的行构建为文字对象。
var collsArray = [];
var rowsArray = [];
for (var i = 0; i < vm.projects.length ; i++) {
//this is where I build each data row and where I think I need to add the color
rowsArray.push({
"c": [
{
"v": vm.projects[i].name
},
{
"v": vm.projects[i].developers,
"f": vm.projects[i].developers + ' developers working on ' + vm.projects[i].name
}]
});
}
collsArray = [{id: 'project', label: 'Project', type: 'string'},
{id: 'developers', label: 'Developers working', type: 'number'}];
vm.chartProjects = {
"type": "ColumnChart",
"displayed": false,
"data": {
"cols": collsArray,
"rows": rowsArray
},
"options": {
"isStacked": "true",
"fill": 0,
"width": '100%',
"height": '100%',
"displayExactValues": true,
"chartArea": {
"left": "1%",
"top": "1%",
"height": "98%",
"width": "98%"
}
},
"formatters": {},
"view": {}
};
添加样式列角色是为单个条形着色的最简单方法。
你可以尝试这样的事情...
var colorPallette = [
'#7B241C', '#CB4335', '#FF9900', 'Gold', '#28B463',
'#196F3D', '#0D47A1', '#29B6F6', 'Indigo', 'Violet'
];
var collsArray = [];
var rowsArray = [];
collsArray = [
{id: 'project', label: 'Project', type: 'string'},
{id: 'developers', label: 'Developers working', type: 'number'},
{role: 'style', type: 'string'} // style column
];
var colorIndex = -1;
for (var i = 0; i < vm.projects.length ; i++) {
// manage color pallette
colorIndex++;
if (colorIndex === colorPallette.length) {
colorIndex = 0;
}
rowsArray.push({
"c": [
{
"v": vm.projects[i].name
},
{
"v": vm.projects[i].developers,
"f": vm.projects[i].developers + ' developers working on ' + vm.projects[i].name
},
{
"v": colorPallette[colorIndex] // style column
}
]
});
}
此答案显示了您可以使用的各种颜色定义。
仅供参考:此选项不适用于材质图表...
相关文章:
- 在自定义坐标处获取RaphaelJS元素的颜色填充
- 柱形图中每列的 ng-谷歌图表自定义颜色
- 如何在mozilla firefox扩展中更改自定义工具栏按钮的颜色
- 设计颜色自定义程序
- JQPLOT 根据标签名称为饼图设置自定义颜色
- 如何在 gmap v3 中对图标使用自定义颜色
- JustGage 中的自定义颜色无法正常工作
- C3js 行数据,自定义颜色
- 如何流畅地制作动画、自定义颜色和控制 jQuery UI 进度条
- CKeditor-自定义颜色
- 检查用户是否在浏览器中设置了自定义颜色
- 导航栏/菜单未使用Safari以自定义颜色显示(其他浏览器中的正确颜色)
- 有没有办法在HTML 5中自定义颜色选择器?
- 创建自定义颜色集TinyMCE
- 自定义颜色选择器TinyMCE
- 如何在vis.js中为堆叠条形图定义自定义颜色?
- 将自定义颜色添加到w2ui单元格[网格]
- HighCharts:如何将自定义颜色与渐变相结合
- 拉斐尔演示饼图调整添加自定义颜色
- ExtJS 4菜单颜色选择器中的自定义颜色(Ext.menu.ColorPicker)