包含extjs4charts圖表的詞條

本文目錄一覽：

• 1、extjs4.2 charts做柱狀圖怎麼設置柱子寬度
• 2、Extjs 4.2 chart中如何自定義legend 圖列
• 3、extjs4 chart怎麼動態增加維度
• 4、怎麼在Extjs裡面整合Echarts顯示出圖形 求代碼
• 5、extjs4 charts做柱狀圖怎麼設置柱子寬度

extjs4.2 charts做柱狀圖怎麼設置柱子寬度

查閱了一下api，好像沒有能設置柱狀圖單個柱寬的配置或方法

柱寬由x軸的數據數量自行計算得出的

Extjs 4.2 chart中如何自定義legend 圖列

重寫下面這個方法:

Ext.chart.LegendItem.prototype.getLabelText = function() {

var me = this, series = me.series, idx = me.yFieldIndex;

function getSeriesProp(name) {

var val = series[name];

return (Ext.isArray(val) ? val[idx] : val);

}

return getSeriesProp(‘dispalyField’) || getSeriesProp(‘yField’);

};

然後在series配置中添加如下

yField : [‘dataSum’, ‘dataSuccSum’, ‘dataFailSum’],

dispalyField : [‘總數’,

‘成功’,

‘失敗’]

yField 是原生屬性,dispalyField 是擴展屬性.裡面配置你想要顯示的數據.注意要和yField 對應

extjs4 chart怎麼動態增加維度

chart要展示的曲線將來可能是曲線的條數，名字，數據什麼的都會改變，最主要的是要在同一個chart處能夠通過下來選項框，選擇任意展示數據曲線（也許一開始可能覺得，那我定義多個chart，每個chart對應一個下拉選項不就好了

但是，問題在於，現在下拉選項也是未來可能會動態增加的）Chart動態刷新fields，實際上就是chart中繪製的多條線可能是不固定的，動態改變的，或者至少說是chart的每條線的對應的fields域名是動態改變的。

怎麼在Extjs裡面整合Echarts顯示出圖形 求代碼

1. index.html文件中引入Echarts

[html] view plain copy

script type=”text/javascript” src=”js/echarts-min.js”/script

「js/echarts-min.js」替換成自己的echart文件路徑

2. 新建一個Panel（其他控制項都OK），名字叫做EchartsPanel，名字可以根據自己項目需要取

extjs4 charts做柱狀圖怎麼設置柱子寬度

加樣式

例子

series: [

{

type: ‘column’,

axis: ‘left’,

highlight: true,

style: { width: 10 },//這裡是寬度

tips: {

trackMouse: true,

width: 140,

height: 28,

renderer: function (storeItem, item) {

this.setTitle(storeItem.get(‘name’) + ‘: ‘ + storeItem.get(‘data’) + ‘ $’);

}

},

label: {

display: ‘insideEnd’,

‘text-anchor’: ‘middle’,

field: ‘data’,

renderer: Ext.util.Format.numberRenderer(‘0’),

orientation: ‘vertical’,

color: ‘#333’

},

xField: ‘name’,

yField: ‘data’

}

]

});