在 ExtJs 4 中隐藏图表系列

发布于 2025-01-01 22:13:52 字数 1628 浏览 3 评论 0原文

我正在将 ExtJs 3 应用程序迁移到 ExtJs 4。我需要更改的组件之一是一个包含一系列条形图和线条的图表。它显示了往年和今年的数据。图表旁边有一个复选框“与上一年比较”。当它被选中时，所有线系列都应该是可见的，而当它没有被选中时，所有线系列都应该是隐藏的。在 ExtJs 3 中，我通过以下方式设置系列样式的可见性：隐藏来完成此任务：chart.setSeriesStyles(...)。但在 ExtJs 4 中，这个功能不存在，我找不到任何其他方法来按需隐藏系列。这是我的图表的代码：

    var store = Ext.create('Ext.data.Store', {
    fields: [
        'month','data1','data2','data3','prev_data1','prev_data2','prev_data3'
    ],
    proxy: {
        type: 'ajax',
        url: '/getmonthlystats.php'
    }
});

this.statChart = Ext.create('Ext.chart.Chart', {
    flex: 1,
    store: store,
    axes: [{
        type: 'Numeric',
        position: 'left',
        minimum: 0,
        maximum: 100,
        fields: [
            'data1',
            'data2',
            'data3',
            'prev_data1',
            'prev_data2',
            'prev_data3'
        ],
        label: {
            renderer: Ext.util.Format.numberRenderer('0,0')
        },
        grid: true
    },{
        type: 'Category',
        position: 'bottom',
        fields: ['month'],
        label: {
            rotate: {
                degrees: 315
            }
        }
    }],
    series: [{
        type: 'column',
        yField: ['data1','data2','data3'],
        xField: 'month'
    },
    {
        type: 'line',
        yField: 'prev_data1',
        xField: 'month'
    },{
        type: 'line',
        yField: 'prev_data2',
        xField: 'month'
    },{
        type: 'line',
        yField: 'prev_data3',
        xField: 'month'
    }]
});

因此，应在需要时显示或隐藏 prev_data1、prev_data2、prev_data3 行（取决于复选框状态）。有谁知道如何做到这一点？

谢谢。

原文

I'm migrating ExtJs 3 application to ExtJs 4. One of the component that I need to change is a chart that has series of bars and lines on it. It displays the data for previous and current years. Beside the chart there is a checkbox "Compare to previous year". When it checked all line series should be visible and hidden when it is not checked.
In ExtJs 3 I did this task by setting visibility:hidden for series styles this way: chart.setSeriesStyles(...). But in ExtJs 4 this function is absent and I can't find any other way to hide series on demand.
Here is the code of my chart:

    var store = Ext.create('Ext.data.Store', {
    fields: [
        'month','data1','data2','data3','prev_data1','prev_data2','prev_data3'
    ],
    proxy: {
        type: 'ajax',
        url: '/getmonthlystats.php'
    }
});

this.statChart = Ext.create('Ext.chart.Chart', {
    flex: 1,
    store: store,
    axes: [{
        type: 'Numeric',
        position: 'left',
        minimum: 0,
        maximum: 100,
        fields: [
            'data1',
            'data2',
            'data3',
            'prev_data1',
            'prev_data2',
            'prev_data3'
        ],
        label: {
            renderer: Ext.util.Format.numberRenderer('0,0')
        },
        grid: true
    },{
        type: 'Category',
        position: 'bottom',
        fields: ['month'],
        label: {
            rotate: {
                degrees: 315
            }
        }
    }],
    series: [{
        type: 'column',
        yField: ['data1','data2','data3'],
        xField: 'month'
    },
    {
        type: 'line',
        yField: 'prev_data1',
        xField: 'month'
    },{
        type: 'line',
        yField: 'prev_data2',
        xField: 'month'
    },{
        type: 'line',
        yField: 'prev_data3',
        xField: 'month'
    }]
});

So, the lines prev_data1, prev_data2, prev_data3 should be shown or hidden when needed (depending on the checkbox state). Does anyone know the way to do that?

Thanx.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

审判长 2025-01-08 22:13:52

试试这个（我的代码示例）：

handler: function (checkbox, checked) {
    if (checked)
        chart.series.getAt(index).showAll();
    else
        chart.series.getAt(index).hideAll();
}

Try this (sample from my code):

handler: function (checkbox, checked) {
    if (checked)
        chart.series.getAt(index).showAll();
    else
        chart.series.getAt(index).hideAll();
}

回复收藏 0 原文

jJeQQOZ5 2025-01-08 22:13:52

对于 ExtJS 4.2.x

如果您在图表中使用“图例”，则以下代码将更适合您：

var chart = Ext.getCmp(chartId);
var series = chart.series.getAt(seriesIndex);
if (value) {
    series.showInLegend = true;
    series.showAll();
} else {
    series.showInLegend = false;
    series.hideAll();
}
chart.redraw();

For ExtJS 4.2.x

If you use 'legend' with your charts, this code will be better for you:

var chart = Ext.getCmp(chartId);
var series = chart.series.getAt(seriesIndex);
if (value) {
    series.showInLegend = true;
    series.showAll();
} else {
    series.showInLegend = false;
    series.hideAll();
}
chart.redraw();

回复收藏 0 原文

~没有更多了~