javascript - ExtJS 图表 - 打开和关闭列

Question

我对 ExtJS 图表有点困惑。

我创建了一个柱形图，它的数据看起来像这样

[
    {'name':'Stu', 'score':10},
    {'name':'Jack', 'score':50},
    {'name':'Lily', 'score':100}
]

我让它在图表中工作，但我希望能够关闭每一列。我可以显示图例，但它将所有数据作为一个数据集（我猜这是有道理的）。

如何使每列作为单独的项目出现在图例中？

谢谢

Answer 1

您将无法在简单的条形图或柱形图中执行此操作

要走的路是组图

这里我给你一个示例代码，你自己运行看看，希望对你有帮助

     Ext.onReady(function() {
Ext.define('testModel', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'label', type: 'string'},
        {name: 'Tom',   type: 'int'},
        {name: 'Bob',   type: 'int'},
        {name: 'Steve', type: 'int'},
        {name: 'Eric',  type: 'int'},
        {name: 'Ed',    type: 'int'},
    ]
});

var store = Ext.create('Ext.data.Store', {
    model: 'testModel',
    data: [{
        'label':'Friends',
        'Tom':   '5',
        'Bob':   '7',
        'Steve': '8',
        'Eric':  '9',
        'Ed':    '8'
    }]
});

Ext.create('Ext.panel.Panel', {
    height: 400,
    width: 500,
    frame: true,
    renderTo: Ext.getBody(),
    items: [{
        height: 400,
        width: 500,
        xtype: 'chart',
        store: store,
        legend: {
            position: 'right'
        },
        axes: [{
            type: 'Category',
            position: 'left',
            fields: 'label',
            title: 'Friends'
        }, {
            type: 'Numeric',
            position: 'bottom',
            fields: ['Tom', 'Bob', 'Steve', 'Eric', 'Ed'],
            title: 'Hours of Sleep',
            grid: true,
            minimum: 0
        }],
        series: [{
            showInLegend: true,
            type: 'bar',
            axis: 'bottom',
            xField: 'label',
            yField: ['Tom', 'Bob', 'Steve', 'Eric', 'Ed'],
        }]
    }]
});
    });