ExtJS柱形图,带有2个Y轴和标题

时间:2014-09-30 09:24:26

标签: javascript extjs charts

我试图用两个系列和两个Y轴绘制柱形图 ,但它在右侧显示四个标题。我期望显示两个标题数据和数据2。
请帮我解决这个问题

这样的事情: http://jsfiddle.net/7sstvj84

Ext.onReady(function () {
    var store = Ext.create('Ext.data.JsonStore', {
        fields: ['name', 'data','data2'],
        data: [{
            'name': 'metric one',
            'data': 20,
           'data2': 2
        }, {
            'name': 'metric two',
            'data': 7,
          'data2': 20
        }, {
            'name': 'metric three',
            'data': 5,
          'data2': 17
        }]
    });

    Ext.create('Ext.chart.Chart', {
        renderTo: Ext.getBody(),
        width: 500,
      height:300,
        animate: true,
        store: store,
       legend: {
                position: 'right'
            },
        axes: [{
            type: 'Numeric',
            position: 'left',
            fields: ['data'],
           title: true,
            title: 'Sample Values',
            grid: true,
            minimum: 0
        }, {
            type: 'Numeric',
            position: 'right',
            fields: ['data2'],
          title: true,
            title: 'Values',
            grid: false,
            minimum: 0
        },{
            type: 'Category',
            position: 'bottom',
            fields: ['name'],
            title: 'Sample Metrics'
        }],
        series: [{
            type: 'column',
            axis: 'left',
            highlight: true,
            xField: 'name',
            yField: ['data','name']
        },{
            type: 'column',
            axis: 'right',
            highlight: true,
            xField: 'name',
            yField: ['name','data2']
        }]
    });
});

1 个答案:

答案 0 :(得分:0)

看起来好像缺少必需的文件!

   Ext.require([
      'Ext.data.JsonStore',
'Ext.chart.Chart',
'Ext.chart.series.Column',
'Ext.chart.axis.Numeric',
'Ext.chart.axis.Category'
    ]);

我尝试了您的代码,只包含上面的代码段才能使其正常运行。 如果要在Web应用程序中使用代码,可以考虑创建一个类并设置命名空间。