Question

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

改变所有人的颜色似乎很简单，但我很难找到一个解决方案，将每个列填充为单独的颜色。

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

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

有什么建议吗？

我目前的代码看起来像这样：

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
                ]

Answer 1

我找到了一个解决方案，使用渲染器配置为条形图，它循环遍布我拥有的颜色数组

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

创建多色ExtJS柱形图的最简单方法

1 个答案: