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

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

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

来源

2011-02-01 shane87

你是指ExtJS海图还是YUI海图？据我所知，他们不是同一件事。 – 2011-02-01 15:27:02

试试这个：

创建一个隐藏字段，它的值赋给它包含颜色保值字段的值。
当渲染条形图时，将条形的背景色设置为隐藏字段的值。

来源

2011-02-05 23:32:57 InfoLearner

看看这个blog post。当您配置图表对象时，请使用该文章中描述的带有style属性的系列对象来定义颜色及其顺序。

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

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

来源

2011-03-05 17:09:47 bwest

从我已经能够找到，你可以使用

(...), 
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-18 22:54:38 SerEnder

是的，你可以通过使用渲染器来实现。下面的代码示例变化的条的颜色在条形图：

  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-15 13:32:36

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

回答

相关问题