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

EXTJS - chart refresh, redraw - How to update a chart

本文关键字：何更新 更新 刷新 重绘 EXTJS-      更新时间：2023-09-26

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

我的过滤表单非常简单：它包含不同的时间段，如"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图表

我想通了！以下是我所做的：

这是我的一个单选按钮的处理程序（来自上面）。如果选中该按钮，则我会重新加载图表的存储。我没有传递硬编码的数据，而是创建了一个名为filteredData的函数。此函数使用ajax为该图表生成特定格式的数据。我将检查的值（变量名"value"）作为参数发送，以便函数使用。

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是一个非常重要的部分，我没有意识到我需要它。

足够简单；）

在ExtJS 3.4.0上，

Ext.getCmp（'chartCmp'）.refresh（）；

相关文章：