Javascript 如何使用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') + '%');
                    }
                }
            }
    ]
});

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

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

这是代码

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已共享我的预期图像

---

柱状图

不能与

顶轴

和

底轴

一起使用，因为您必须使用

条形图

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

请参考这个

---

一般来说，所有图表都必须有一条垂直线（左/右）和一条水平线（上/下）。通过这种方式，只有您可以确定创建任何图表所必需的连接点

尝试向数字轴添加最大值：20/***@cfg{Number}max*轴绘制的最大值。如果未明确设置，将自动计算轴*最大值。*/maximum:NaN，@Couponrabais您的逻辑是正确的，但很抱歉我的问题错了，现在我要看的是，底部的图形值将是自定义值，我已经分享了我预期的图像。