Jquery FusionChart动态渲染图表
我正在尝试重新创建一个仪表板,以正确学习如何使用FusionCharts 我在复制。如果您注意到,每次浏览选项卡时,图表都将重新呈现 在我的网站() 第一次更改到任何选项卡或更改任何选择输入时,图表仅呈现一次(在更改图表数据时,无论如何都要这样做) 我希望在选项卡更改时实现与在仪表板中相同的重新渲染 现在我以两种方式呈现图表 第一个是index.php中的.js,它构建并呈现页面中几乎所有的图表,这些图表都有静态数据,因此它们的构建方式如下:Jquery FusionChart动态渲染图表,jquery,ajax,render,fusioncharts,Jquery,Ajax,Render,Fusioncharts,我正在尝试重新创建一个仪表板,以正确学习如何使用FusionCharts 我在复制。如果您注意到,每次浏览选项卡时,图表都将重新呈现 在我的网站() 第一次更改到任何选项卡或更改任何选择输入时,图表仅呈现一次(在更改图表数据时,无论如何都要这样做) 我希望在选项卡更改时实现与在仪表板中相同的重新渲染 现在我以两种方式呈现图表 第一个是index.php中的.js,它构建并呈现页面中几乎所有的图表,这些图表都有静态数据,因此它们的构建方式如下: var myChart = new FusionCh
var myChart = new FusionChart (
//structure and static data here*
).render();
$('#sel1sbmn2chart2').on('change', function(){
var x = this.value;
$.ajax({
url: 'includes/gastoDinamico.php',
type: 'POST',
data: {selYear: x},
success: function(data){
myChart.setChartData(data, "json");
}
});
});
第二种方法是通过Ajax将参数发送到另一个.php,该.php从MySQL数据库中检索数据,我在该数据库之后编写了JSONECode,这些数据库与上面调用的.js相同。此选项用于更改图表上的数据,如下所示:
var myChart = new FusionChart (
//structure and static data here*
).render();
$('#sel1sbmn2chart2').on('change', function(){
var x = this.value;
$.ajax({
url: 'includes/gastoDinamico.php',
type: 'POST',
data: {selYear: x},
success: function(data){
myChart.setChartData(data, "json");
}
});
});
此外,我还使用jquery附加了onClick事件,以重新呈现页面上的第一个图表,该图表位于Presupuestos/Ventas选项卡中。以与上面代码相同的方式完成
这很正常,因为它有一些奇怪的行为再次渲染图表。有时,它会从0重新呈现图表(这意味着,与我尝试复制的FusionCharts仪表板的方式相同)其他时候,您会看到图表呈现(在缓存中),然后重新呈现。其他时候,图表将以其他分辨率呈现,更小(我将分辨率设置为600x400,小的看起来像是预设的分辨率或其他)
我尝试过其他解决此问题的方法,例如在再次渲染之前使用.dispose()方法,但无法使其工作(错误:dispose()不是函数/重复的ID图表/找不到要渲染的DOM元素/etc)
另外,我在互联网上研究发现,每个人都有相反的问题。图表在选项卡更改时动态呈现
我想大部分代码你可以在我的网页的源代码中查看,或者如果你需要任何其他特定的代码,我可以编辑我的OP
如何使图表在选项卡更改时动态呈现?
我想不出我做错了什么。胡猜!这可能不适用于FusionCharts,而适用于您正在使用的选项卡组件。无法打开你的网站进行进一步调查。我正在使用引导选项卡。。也许会有用?