Question

我正在尝试使用ext js图表插件创建金额和月份图表，其中月份应该在顶部，金额应该在底部，我成功地能够带来该视图，但问题是，金额正在变为小数值

这里是左（Amount）和底（Month）视图

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

以下是代码

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

如果您检查＆＃34;位置＆＃34; ，它将位于＆＃34;轴：[]＆＃34; 数组列表

问题更新

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

Answer 1

Column Chart无法与top axis和bottom axis一起使用，因为您必须使用Bar Chart。

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

请参阅此link。

通常，所有图表都必须有一条垂直线（左/右）和一条水平线（顶部/底部），只有这样才能识别创建任何图表所必需的连接点。

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

1 个答案: