Question

我在我的应用程序中使用ExtJs / YUI图表。我想知道的是，是否可以根据数据动态更改任何图表上的颜色？

即。我有一个商店，其中包含一个字段，其中包含该特定行的十六进制颜色。是否可以使用十六进制值动态设置条形图中条形的颜色？

Answer 1

看看这个blog post。在配置图表对象时，使用该帖子中描述的样式属性传递一个系列对象，以定义颜色及其顺序。

然后，您只需要通过循环浏览商店记录并构建新数组，或者使用store.query将其从商店中拉出来获取颜色。然后将此数组作为属性传递。

(...),
series: [style: { colors: arrayBuiltFromStore }],
(...)

Answer 2

从我能找到的内容中，您可以使用

(...),
series: [style: {colors: arrayBuiltFromStore }],
(...)

方法，如果您正在创建饼图（或其他具有series.colors属性的图表），并且效果很好。

如果您使用的是一种不支持series.colors的图表...它会更复杂一些。我发现使用渲染器方法效果很好。这种方法（我可以立即看到）的唯一问题是它不会改变图例中的颜色。需要进一步编辑才能看出是否可以从商店中取出。

如果你弄清楚传说问题，请告诉我，但我希望这会有所帮助。

注意：并非所有在下面脚本中使用的变量都填充在脚本中。

function myColorer(rec) {
var aFiller = new Array('#0000FF','#31CD31','#FFFF00','#FF0000');
    return aFiller[rec];
}
Ext.onReady(function() {
    var sDataStore = new Ext.data.JsonStore(sPathToDataStore);
    chart = new Ext.chart.Chart({
        renderTo: document.getElementById('test-graph'),
        width: 800,
        height: 600,
        animate: true,
        store: sDataStore,
        legend: {
            position: 'right',
            isVertical: true,
        },
        axes: [{
            type: 'Numeric',
            grid: true,
            position: 'left',
            fields: ['field1','field2','field3','field4'],
            title: 'Title Here',
            grid: {
                odd: {
                    opacity: 1,
                    fill: '#ddd',
                    stroke: '#bbb',
                    'stroke-width': 1
                }
            },
            minimum: 0,
            adjustMinimumByMajorUnit: 0
        }, {
            type: 'Category',
            position: 'bottom',
            fields: label1,
            title: sXAxisLabel,
            grid: true,
        }],
        series: [{
            renderer: function(sprite, record, curAttr, index, store) {
                var color = myColorer(index);
                return Ext.apply(curAttr, {
                    fill: color
                });
            },
            type: 'area',
            highlight: false,
            axis: 'left',
            xField: label1,
            yField: ['field1','field2','field3','field4'],
            style: {
                opacity: 0.93
            }
        }]
    });
});

Answer 3

试试这个：

创建隐藏字段并将其值分配给包含颜色值的商店字段的值。
在渲染条形图时，将条形图的背景颜色设置为隐藏字段的值。

Answer 4

是的，您可以使用渲染器来完成。下面的代码示例更改条形图中条形的颜色：

            series: {
                type: 'bar',
                xField: 'name',
                yField: 'value',
                label:{
                    field: 'value'
                },
                renderer: function(sprite, config, rendererData, index) {

                    var record = rendererData.store.getData().items[index];

                    return Ext.apply(rendererData, {
                        fillStyle: record.data.color,
                    });
                }
            }

这里＆＃39;颜色＆＃39;是商店模型的一个领域。您可以通过在商店的相应记录中设置每个栏来设置不同的颜色。

可以动态更改ExtJs / YUI图表中图表上的颜色吗？

4 个答案: