可以動態更改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圖表中圖表上的顏色嗎？

回答

相關問題