How do I define custom colors for my stacked bar charts in vis.js?
I am using the vis.js to make some stacked bar charts. Here's the code I have:
var barGraphDiv = document.createElement('div');
barGraphCombinedDiv.appendChild(barGraphDiv);
var groups = new vis.DataSet();
groups.add({id: 0, content: "group0", color:{'background': 'red'}})
groups.add({id: 1, content: "group1", color:{'background': 'green'}})
groups.add({id: 2, content: "group2", color:{'background': 'blue'}})
var items = [
{x: '2014-06-11', y: 10, group:0},
{x: '2014-06-12', y: 25, group:0},
{x: '2014-06-13', y: 30, group:0},
{x: '2014-06-14', y: 10, group:0},
{x: '2014-06-15', y: 15, group:0},
{x: '2014-06-16', y: 30, group:0},
{x: '2014-06-11', y: 12, group:1},
{x: '2014-06-12', y: 15, group:1},
{x: '2014-06-13', y: 34, group:1},
{x: '2014-06-14', y: 24, group:1},
{x: '2014-06-15', y: 5, group:1},
{x: '2014-06-16', y: 12, group:1},
{x: '2014-06-11', y: 22, group:2},
{x: '2014-06-12', y: 14, group:2},
{x: '2014-06-13', y: 24, group:2},
{x: '2014-06-14', y: 21, group:2},
{x: '2014-06-15', y: 30, group:2},
{x: '2014-06-16', y: 18, group:2}
];
var dataset = new vis.DataSet(items);
var options = {
style:'bar',
stack:true,
barChart: {width:50, align:'center', sideBySide:true},
drawPoints: false,
dataAxis: {
icons:true
},
orientation:'top',
start: '2014-06-10',
end: '2014-06-18',
groups: {
0: {color:{background:'red'}},
1: {color:{background:'green'}},
2: {color:{background:'blue'}},
}
};
var graph2d = new vis.Graph2d(barGraphDiv, items, groups, options);
So h ow do I set what colors I want my group to be? Thanks!
When you define the group you can specify a className property. eg
groups.add({id: 0, content: "group0", className: "group0Style"});
You then just need the class in your css like this:
.group0Style {
fill: #f2ea00;
fill-opacity:0;
stroke-width:2px;
stroke: #b3ab00;
}
上一篇: 我是否实例化了一个void对象？