如何使用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圖表製作頂部和底部視圖

回答

相關問題