javascript EXTJS - 图表刷新、重绘 - 如何更新图表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12359757/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
EXTJS - chart refresh, redraw - How to update a chart
提问by hereiam
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.
所以我在面板中有一个图表。该面板包含两个选项卡。第一个选项卡包含图表。第二个选项卡包含一个小表单，我用它来过滤图表中的数据。
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.
我的过滤表单非常简单：它包含不同的时间段，例如“7 天”、“30 天”等，一旦选择，它会将用户选择（使用 ajax）发送到我为图表生成数据的位置。
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**
}
}
Question: How can I update an EXTJS chart on a user action?
问题：如何根据用户操作更新 EXTJS 图表？
回答by hereiam
I figured it out! Here's what I did:
我想到了！这是我所做的：
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.
这是我的一个单选按钮的处理程序（从上面）。如果选中该按钮，则我会重新加载图表的存储。我没有传递硬编码数据，而是创建了一个名为filteredData 的函数。此函数使用 ajax 以特定格式为该图表生成数据。我将检查的值（变量名“值”）作为参数发送，以便函数使用。
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.loadwas a very important part that I didn't realize I needed.
store.load是一个非常重要的部分，我没有意识到我需要。
Simple enough ;)
足够简单;)
回答by szpapas
On ExtJS 3.4.0,
在 ExtJS 3.4.0 上，
Ext.getCmp('chartCmp').refresh();
Ext.getCmp('chartCmp').refresh();
