如何使用ext js图表制作顶部和底部视图

我正在尝试使用ext js图表插件来制作金额和月份图，其中月份应该位于顶部，金额应该位于底部，我已成功地带来这一观点，但问题是，量改为十进制值如何使用ext js图表制作顶部和底部视图

这里是左（金额）和底部（月）视图

这里就是我特林带来，底部（金额）和顶部（月）视图

下面是代码

Ext.require([ 
    'Ext.chart.Chart' 
]); 

Ext.define('CricketScore', { 
    extend: 'Ext.data.Model', 
    fields: ['month', 'data1' ] 
}); 

var store = Ext.create('Ext.data.Store', { 
    model: 'CricketScore', 
      data: [ 
       { month: 'Jan', data1: 20 }, 
       { month: 'Feb', data1: 20 }, 
       { month: 'Mar', data1: 19 }, 
       { month: 'Apr', data1: 18 }, 
       { month: 'May', data1: 18 }, 
       { month: 'Jun', data1: 17 }, 
       { month: 'Jul', data1: 16 }, 
       { month: 'Aug', data1: 16 }, 
       { month: 'Sep', data1: 16 }, 
       { month: 'Oct', data1: 16 }, 
       { month: 'Nov', data1: 15 }, 
       { month: 'Dec', data1: 15 } 
      ] 
}); 

Ext.create('Ext.chart.Chart', { 
    renderTo: Ext.getBody(), 
    width: 400, 
    height: 300, 
    theme: 'Green', 
    store: store, 
    animate: true, 
    axes: [ 
     { 
       type: 'Numeric', 
       position: 'bottom', 
       fields: ['data1'], 
       minimum: 0 
      }, { 
       type: 'Category', 
       position: 'top', 
       fields: ['month'], 
      } 
    ], 

     series: [ 
     { 
       type: 'column', 
       axis: 'left', 
       xField: 'month', 
       yField: 'data1', 
       style: { 
        opacity: 0.80 
       }, 
       highlight: { 
        fill: '#000', 
        'stroke-width': 20, 
        stroke: '#fff' 
       }, 
       tips: { 
        trackMouse: true, 
        style: 'background: #FFF', 
        height: 20, 
        renderer: function(storeItem, item) { 
         this.setTitle(storeItem.get('month') + ': ' + storeItem.get('data1') + '%'); 
        } 
       } 
      } 
    ] 
});

如果您检查这将是“位置” “轴：[]”数组列表

更新问题

底部图形值将是自定义值，a已共享我的预期图像。

来源

2017-05-31 Divya Sharma

尝试在数字轴上添加最大值：20到 –

/** * @cfg {数量}最大值 *由轴绘制的最大值。如果未明确设置，将自动计算最大轴 *。 */ 最大：为NaN， –

@Couponrabais你的逻辑是正确的，但对不起，我错了我的问题，现在我所寻求的，底部的图形中值将是自定义值，我分享了我的预期影像。 –

Column Chart不能使用与top axis和bottom axis为您必须使用Bar Chart。

series: [ 
      { 
        type: 'bar', 
        ... 
      }

请参考link。

一般而言，所有的图表有那条路上有一条垂直线（左/右）和一个水平线（上/下），只有你能识别连接点是必须创造任何图表。

来源

2017-06-01 10:53:46

如何使用ext js图表制作顶部和底部视图

回答

相关问题