EXTJS - 图表刷新，重绘 - 如何更新图表 [英] EXTJS - chart refresh, redraw - How to update a chart

问题描述

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

So I have a chart inside a panel. The panel contains two tabs. The first tab contains the chart. The second tab contains a small form that I am using to filter the data in the chart.

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

My filtering form is pretty simple: it contains different time periods such as '7 days', '30 days', etc, and once selected, it sends the user selection (using ajax) to where I am generating the data for my chart.

这是伟大的，所有...但是如何让图表更新？用户可以选择他们想要的任何选项（我知道脚本获取数据和更改查询），但是图表从不改变。我想我应该使用重画或刷新。

That's great and all... but how do I get the chart to UPDATE?! The user can select whatever option they want (and I know that the script is getting the data and changing the query), but the chart never changes. I think I'm supposed to use redraw or refresh.

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

Here's what I'm thinking: Add the redraw/refresh to my form handler here, looking something like this

        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以特定格式生成该图表的数据。我发送选中的值（变量名称'值）作为参数，以便由函数使用。

Here is a handler (from above) for one of my radio buttons. If the button is checked, then I reload the store of my chart. Instead of passing hardcoded data, I made a function titled filteredData. This function uses ajax to generate the data for that chart in a particular format. I send the checked value (variable name 'value) as a param in order to be used by the function.

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();
    }}

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

Once the store is refreshed, I then redraw the chart!

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

store.load was a very important part that I didn't realize I needed.

很简单;）

这篇关于EXTJS - 图表刷新，重绘 - 如何更新图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！