Question

所以我在面板中有一个图表。该面板包含两个选项卡。第一个选项卡包含图表。第二个选项卡包含一个小表单，我用它来过滤图表中的数据。

我的过滤表单非常简单：它包含不同的时间段，例如“7天”，“30天”等，一旦选中，它会将用户选择（使用ajax）发送到我为其生成数据的位置我的图表。

这很棒，而且......但是如何让图表更新？！用户可以选择他们想要的任何选项（我知道脚本正在获取数据并更改查询），但图表永远不会更改。我想我应该使用重绘或刷新。

这就是我的想法：在这里将重绘/刷新添加到我的表单处理程序中，看起来像这样

        xtype: 'radiofield',
        name: 'timespan',
        id: 'radio3',
        inputValue: 30,
        boxLabel: '30 days',
        handler: function(checkbox, checked) {
           if (checked ) {
              console.log(checkbox.inputValue);
              **HERE**
            }
        }

问题：如何更新用户操作的EXTJS图表？

Answer 1

我明白了！这就是我的所作所为：

这是我的一个单选按钮的处理程序（从上面开始）。如果选中该按钮，则重新加载图表的商店。我没有传递硬编码数据，而是创建了一个名为filteredData的函数。此函数使用ajax以特定格式生成该图表的数据。我将检查值（变量名称＆＃39;值）作为参数发送，以供函数使用。

handler: function(checkbox, checked) {
    if (checked ) { //refreshes the chart with new data
        var chart = this.ownerCt.ownerCt.ownerCt.getComponent('dataTab').getComponent('graph');
        var chartCmp = chart.getComponent('chartCmp'); //actual chart (used to redraw)
        var value = checkbox.inputValue; //checked value


        chart.store.loadData(filteredData(value));
        chartCmp.redraw();
    }}

商店刷新后，我会重新绘制图表！

store.load是一个非常重要的部分，我没有意识到我需要。

足够简单;）

Answer 2

在ExtJS 3.4.0上，

。

Ext.getCmp（ 'chartCmp'）刷新（）;

EXTJS - 图表刷新，重绘 - 如何更新图表

2 个答案: