带有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柱形图

回答

相关问题