6

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

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

4

4 回答 4

1

从我所能找到的，你可以使用

(...),
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
            }
        }]
    });
});
于 2011-04-18T22:54:38.767 回答
1

看看这篇博文。当您配置图表对象时，传递一个带有样式属性的系列对象，如该帖子中所述，以定义颜色及其顺序。

然后，您只需要通过循环遍历您的商店记录并构建一个新数组，或者使用 store.query 从您的商店中提取它来获取您的颜色。然后将此数组作为属性传递。

(...),
series: [style: { colors: arrayBuiltFromStore }],
(...)
于 2011-03-05T17:09:47.577 回答
0

是的，您可以通过使用渲染器来做到这一点。以下代码示例更改条形图中条形的颜色：

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

这里的“颜色”是商店模型的一个字段。您可以通过在商店的相应记录中设置每个条形来为每个条形设置不同的颜色。

于 2014-12-15T13:32:36.743 回答
0

尝试这个：

  1. 创建一个隐藏字段并将其值分配给包含颜色值的存储字段的值。
  2. 渲染条形图时，将条形图的背景颜色设置为隐藏字段的值。
于 2011-02-05T23:32:57.500 回答