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

Question

我正在尝试使用ext js图表插件制作Amount and Month图，其中月份应该在顶部，金额应该在底部，我能够成功显示该视图，但是问题是，金额正在更改为十进制值

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

http://jsfiddle.net/djaydxnd/52/

这是我要带来的，底部（金额）和顶部（月）视图

http://jsfiddle.net/djaydxnd/51/

这是代码

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') + '%');
                    }
                }
            }
    ]
});

如果检查“位置” ，它将位于“轴：[]”阵列列表中

有问题的更新

底部的图形值将是自定义值，已经共享了我的期望图像。

Answer 1

Column Chart不能与top axis和bottom axis一起使用，因为必须使用Bar Chart 。

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

请参考此链接 。

通常，所有图表必须具有一条垂直线（左/右）和一条水平线（上/底），这样您才能确定连接点，这对于创建任何图表都是必不可少的。