javascript - 如何在 vis.js 中为堆叠条形图定义自定义颜色？

Question

我正在使用 vis.js 制作一些堆叠条形图。这是我的代码:

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);

那么我该如何设置我想要我的群组的颜色呢？谢谢!

Answer 1

当您定义组时，您可以指定一个类名属性。例如

groups.add({id: 0, content: "group0", className: "group0Style"});

然后你只需要在你的 css 中这样的类:

.group0Style {
  fill: #f2ea00;
  fill-opacity:0;
  stroke-width:2px;
  stroke: #b3ab00;
}