如何为 fllot 中的条形图赋予纯色

2024-01-11

我需要为条形图提供纯色...... 我已关注此链接条形图示例 http://www.saltycrane.com/blog/2010/03/jquery-flot-stacked-bar-chart-example/

但我想要提供纯色,而且我还需要自己改变颜色......该怎么做......


首先,阅读API.txt http://flot.googlecode.com/svn/trunk/API.txt,它回答了您所有的问题。那么你需要做两件事。当您指定需要条形时,请设置fill: 1,它告诉 flot 将颜色设置为 100% 不透明。要指定每个系列的颜色,只需添加color:'red'到每个数据对象。

所以你最终得到一个像这样的数据对象:

var data = [
    {label: 'foo', color:'red', data: [[1,300], [2,300], [3,300], [4,300], [5,300]]},
    {label: 'bar', color:'blue', data: [[1,800], [2,600], [3,400], [4,200], [5,0]]},
    {label: 'baz', color:'yellow', data: [[1,100], [2,200], [3,300], [4,400], [5,500]]},
];

和浮动选项如下:

{
    series: {
        stack: 1,
        bars: {
            show: true,
            barWidth: 0.6,
            fill:1
        }
    }
}

在这里查看它的实际效果:http://jsfiddle.net/ryleyb/kKdxt/ http://jsfiddle.net/ryleyb/kKdxt/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何为 fllot 中的条形图赋予纯色 的相关文章