简体   繁体   English

具有2个Y轴和标题的ExtJS柱形图

[英]ExtJS Column Chart with 2 Y axes and title

I'm trying to plot a column chart with two series and two Y axis ,but it show four title on right side. 我正在尝试绘制带有两个系列和两个Y轴的柱形图,但它在右侧显示了四个标题。 I expect to show two title data and data2. 我希望显示两个标题数据和data2。
Please help me to fix this problem 请帮我解决这个问题

Something like that : http://jsfiddle.net/7sstvj84 像这样的东西: 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']
        }]
    });
});

It looks like is missing the required files! 似乎缺少必需的文件!

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

I tried your code and only include the above snippet to make it work. 我尝试了您的代码,仅包含上面的代码片段使其起作用。 If you are going to use the code in a web application you might consider creating a class and setting up your namespace. 如果要在Web应用程序中使用代码,则可以考虑创建一个类并设置名称空间。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM