ExtJS 4.2.1.883:未绘制条形图

时间:2016-03-29 22:04:04

标签: javascript extjs charts bar-chart

我正在尝试使用来自http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.chart.series.Bar

的tge相同代码绘制条形图
var store = Ext.create('Ext.data.JsonStore', {
    fields: ['name', 'data'],
    data: [
        { 'name': 'metric one',   'data':10 },
        { 'name': 'metric two',   'data': 7 },
        { 'name': 'metric three', 'data': 5 },
        { 'name': 'metric four',  'data': 2 },
        { 'name': 'metric five',  'data':27 }
    ]
});

Ext.create('Ext.chart.Chart', {
    renderTo: Ext.getBody(),
    width: 500,
    height: 300,
    animate: true,
    store: store,
    axes: [{
        type: 'Numeric',
        position: 'bottom',
        fields: ['data'],
        label: {
            renderer: Ext.util.Format.numberRenderer('0,0')
        },
        title: 'Sample Values',
        grid: true,
        minimum: 0
    }, {
        type: 'Category',
        position: 'left',
        fields: ['name'],
        title: 'Sample Metrics'
    }],
    series: [{
        type: 'bar',
        axis: 'bottom',
        highlight: true,
        tips: {
          trackMouse: true,
          width: 140,
          height: 28,
          renderer: function(storeItem, item) {
            this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' views');
          }
        },
        label: {
          display: 'insideEnd',
            field: 'data',
            renderer: Ext.util.Format.numberRenderer('0'),
            orientation: 'horizontal',
            color: '#333',
            'text-anchor': 'middle'
        },
        xField: 'name',
        yField: 'data'
    }]
});

即使绘制了值,实际图形也不可见。我尝试了各种相同结果的例子。在Fiddle中它可以正常工作,但在我的代码中,图表根本没有被绘制。有人可以帮忙吗? http://jsfiddle.net/kavitaC/8ecc1kme/2/

Pie Chart

The bar graph not plotted

0 个答案:

没有答案