如何建立带对数轴的ExtJS 3.4散点图


问题

您正在呈现指数级增长的数据,并希望显示一个带有对数刻度轴的图表。

指数数据:

相同的对数比例渲染:

解决办法

将相关轴的“刻度”属性设置为“对数”

讨论

除了固定的时间间隔,似乎没有任何方法可以控制主要/次要刻度的频率。在设置这种图表类型时要小心,因为这样会很快让浏览器崩溃,导致闪存没有响应。最好使用数据点上的工具提示来控制渲染。

有关类似图表的进一步讨论,请参见ExtJS scatter chart示例和ExtJS trend line example

Ext.onReady(function() {
Ext.chart.Chart.CHART_URL = 'ext-3.4.0/resources/charts.swf';
   var store = new Ext.data.JsonStore({
    fields: ['year', 'action'],
    data: [
        {year: 2005, action: 100000},
        {year: 2006, action: 1000000},
        {year: 2007, action: 10000000},
        {year: 2008, action: 100000000}
        ]
  });
 
  new Ext.Panel({
    width: 390,
    height: 300,
    renderTo: 'container',
    title: 'Scatter Plot - Takings by Genre',
    items: {
      xtype: 'linechart',
      store: store,
      xField: 'year',
      xAxis: new Ext.chart.NumericAxis({
        minimum: 2004,
        maximum: 2009,
        majorUnit: 1,
 
      }),
      yAxis: new Ext.chart.NumericAxis({
        labelRenderer: Ext.util.Format.usMoney,
        minimum: 10,
        maximum: 1000000000,
        scale: 'logarithmic'
      }),
      series: [{
        yField: 'action',
        displayName: 'Action',
        style: {
          lineAlpha: 0.0
        }
      }]
    }
  });
});