1

如http://dev.sencha.com/ext/5.0.1/examples/kitchensink/?charts=true#bar-basic中的厨房水槽示例所示，每一列都有相同的默认颜色。

为所有人更改颜色似乎很简单，但我正在努力寻找一种解决方案来将每一列填充为单独的颜色。

我正在使用商店并从那里加载来填充图表，因此我可能不知道有多少列。

下面的代码片段将所有条形的颜色设置为数组的第一个元素（奶油）

有什么建议么？

我目前的代码如下所示：

axes: [{
                    type: 'numeric',
                    position: 'left',
                    title: {
                        text: 'Cost',
                        fontSize: 15
                    },
                    grid: true,
                    minimum: 0,
                    fields: 'Value'
                }, {
                    type: 'category',
                    position: 'bottom',
                    title: {
                        text: 'Type',
                        fontSize: 15
                    },
                    fields: 'Type'
                }],
                series: {
                    type: 'bar',
                    xField: 'Type',
                    yField: 'Value'
                },
                colors: [
                    '#FFEC94', //cream
                    '#F7FE2E', //yellow
                    '#3ADF00', //green
                    '#B4D8E7', //light blue
                    '#56BAEC', //blue
                    '#FA5858', //red
                    '#FFAEAE', //pink
                    '#FAAC58' //orange
                ]
4

1 回答 1

2

我通过使用渲染器配置找到了一个解决方案，该配置在我拥有的颜色数组上循环

renderer: function(sprite, record, attr, index, store) {
                        var colors =  [
                            '#FFEC94', //cream
                            '#F7FE2E', //yellow
                            '#3ADF00', //green
                            '#B4D8E7', //light blue
                            '#56BAEC', //blue
                            '#FA5858', //red
                            '#FFAEAE', //pink
                            '#FAAC58' //orange
                        ][index];
                    return Ext.apply(attr, {fill: colors});
                    }
于 2014-09-14T16:51:12.973 回答