如何在vis.js中为我的堆积条形图定义自定义颜色？

我使用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);

那么我该如何设置我想要我的团队的颜色？ 谢谢！

---

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

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

然后，你只需要在你的CSS这样的类：

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

链接地址: http://www.djcxy.com/p/27785.html

上一篇: How do I define custom colors for my stacked bar charts in vis.js?

下一篇: How do I mix typed and untyped actors?