javascript - 如何在extjs 4中制作不同颜色的柱形图

Question

如何在我尝试使用主题实现的extjs中为不同的栏制作不同的颜色。但它无法正常工作，因此我在系列参数中的 yfield 中传递两个参数。我附上了工作示例，因为我还附上了示例屏幕截图以供您引用。你能帮我解决一下吗屏幕截图

您可以引用以下链接以供引用

<code> http://jsfiddle.net/sunith_123/f83v0kbb/8/</code>

Answer 1

删除您的主题并尝试使用以下渲染器来代替您的图表系列:

    series: [{
            type: 'column',
            axis: 'left',
            highlight: false,
            xField: 'name',
            yField: ['rocCCI', 'rocCI'],
            renderer: function(sprite, record, attr, index, store) {
                var color = ['orange', 
                             'peachpuff',
                             'green',
                             'greenyellow'][index%4];
                return Ext.apply(attr, {
                    fill: color
                });
            }

        }]

您将得到以下结果

渲染器正在循环遍历 4 色数组(使用 index%4 作为键)。您可以扩展此数组以添加更多颜色 - 或者使索引计算更加智能以根据当前记录渲染来选择颜色。

唯一的缺点是关键颜色不正确 - 但无论如何它们永远不会使用这种颜色格式!