帶有2個Y軸的ExtJS柱形圖

我想繪製2個系列的柱形圖，因此2個Y軸，一個在左側，另一個在右側。但是這些列顯示在相同的地方，在彼此之上而不是並排。你有什麼想法如何解決這個問題？帶有2個Y軸的ExtJS柱形圖

類似的東西：

Ext.onReady(function() { 
    var chart; 


    chart = new Ext.chart.Chart({ 
     width: 800, 
     height: 600, 
     animate: true, 
     store: store1, 
     renderTo: Ext.getBody(), 
     shadow: true, 
     axes: [{ 
      type: 'Numeric', 
      position: 'left', 
      fields: ['data1'], 
      label: { 
       renderer: Ext.util.Format.numberRenderer('0,0') 
      }, 
      title: 'Number of Hits', 
      grid: true, 
      minimum: 0 
     }, { 
      type: 'Category', 
      position: 'bottom', 
      fields: ['name'], 
      title: 'Month of the Year' 
     }, { 
      type: 'Numeric', 
      position: 'right', 
      fields: ['data2'], 
      title: 'Test' 
     }], 
     series: [{ 
      type: 'column', 
      axis: 'left', 
      highlight: true, 
      xField: 'name', 
      yField: 'data1' 
     }, { 
      type: 'column', 
      axis: 'right', 
      xField: 'name', 
      yField: 'data2' 
     }] 
    }); 
});

感謝

來源

2012-02-15 TrexXx

創建一個零值進入商店並將其附加到第一和第二系列商品。添加的數量取決於其他軸的yField系列項目的長度。

例如，創建具有yField分別如下兩個系列項目：

yField: ['data1', 'data2','data4']

和

yField: ['data4','data4','data3']

其中DATA4是在商店值爲零的條目。

該解決方案完美運作。 :)

來源

2012-07-26 07:13:59 ddsh79

你能總結一下那篇文章在你的回答中說了些什麼？這樣，如果由於某種原因帖子變得不可用，我們在這裏仍然有一個可用的答案:-) – 2012-07-26 08:14:17

這是一個簡單易用的原始問題解決方案。 – 2012-11-01 15:42:29

AFAIK，你不能讓他們並排側。原因是他們不在同一系列。當同一系列中有兩個數據時，它們並排顯示。在你的情況下，你有兩個系列..一個配置使用左軸和其他權利。我建議你爲你的一個系列使用不同類型的圖表。

series: [{ 
    type: 'line', // Instead of column chart I am using line chart... 
    axis: 'left', 
    highlight: true, 
    xField: 'name', 
    yField: 'data1' 
}, { 
    type: 'column', 
    axis: 'right', 
    xField: 'name', 
    yField: 'data2' 
}]

來源

2012-02-15 10:29:28

好的，謝謝。如果沒有辦法做我想做的事，否則我會做！ – TrexXx 2012-02-15 10:47:07

無關@Abdel：爲什麼你會投票批准這個標籤維基編輯：http：//stackoverflow.com/suggested-edits/202200？ – sth 2012-02-15 12:52:13

@sth，不知道如何得到批准！我的錯！我很抱歉 – 2012-02-16 04:46:31

這將增加兩列左軸和第三個爲右軸：

series: [{ 
    type: 'column', 
    axis: 'left', 
    highlight: true, 
    label: { 
     field: ['data1'] 
    }, 
    xField: ‘name’, 
    yField: ['data1', 'data2','whateverUndefinedFieldNameYouComeUpWith'] // Use an undefined field 
},{ 
    type: 'column', 
    axis: 'right', 
    highlight: true, 
    label: { 
     field: 'data3′ 
    }, 
    xField: 'name', 
    yField: ['name','name','data3'] // or just use the same field you use for the x axis 
}]

我希望你的想法。

來源

2012-11-20 11:12:02 Triqui

帶有2個Y軸的ExtJS柱形圖

回答

相關問題