Highcharts / jQuery - 使用原始选项销毁和重建图表 [英] Highcharts / jQuery - destroy and rebuild chart with original options

问题描述

根据此主题中的信息：实现自己的状态 - INACTIVE_STATE？

我制作了一张符合我需求的图表 - jsfiddle

我添加了一些自定义控件，以允许用户显示/隐藏所有系列并检查/取消所有系列。

这些都可以正常工作。

我想要做的最后一部分是允许用户可以用原始选项重置图表。

这部分我也工作过了，但有一个问题：一旦图表重建，允许用户以显示/隐藏/检查/取消选中不再工作，因为我已经销毁并重新指定它们运行的​​变量。

所以我的问题 -

/ p>

1. 这是销毁和重建图表的正确方法，还是有更好的方法？


2. 如果这样做的话，那么如何让我的show / hide / check / uncheck函数继续工作？

重置图表的代码在这里：

  //将图表重置为原始规格
 $（'＃resetChart'）。click（function（）{
 chart1.destroy（）; 
 chart1 =新建Highcharts.Chart（optionsChart1，highlightSer）; 
}）; 
  

highlightSer 是一个回调函数，某些系列。

以下代码不再适用的示例：

  var chart = chart1;点击（函数（）{
为（i = 0; i< chart.series.length; i ++）{
 chart.series [i]）
 $（'＃showAll' .show（）; 
} 
}）; 
  

谢谢！

解决方案

这是破坏和重建图表的正确方法，还是有更好的方法？

这是唯一的方法，Highcharts足够聪明，因此您不必担心任何内存泄漏。

<如果这是做到这一点的方法，那么如何让我的显示/隐藏/检查/取消选中功能继续工作？

您正在重新创建图表，但不会再将其分配给变量 chart 。

<$ p $ （）;
chart1 = new Highcharts.Chart（optionsChart1，highlightSer）; $ b（$＃$） $ b chart = chart1; //< --------在这里添加这行。
}）;

Based on info in this thread: Implement own state - INACTIVE_STATE?

I have built a chart that fits my needs - jsfiddle

I added some custom controls to allow the user to show/hide all series and to check/uncheck all series.

These all work fine.

The last part that I want to do is allow the user to reset the chart with the original options.

This part I also got working, but there is a problem: once the chart is rebuilt, the functions that allow the user to show/hide/check/uncheck no longer work because I have destroyed and re-specified the variable that they run off of.

So my question(s) -

1. is this the right way to destroy and rebuild the chart, or is there a better method?
2. if this is the way to do it, then how do I get my show/hide/check/uncheck functions to continue to work afterward?

The code to reset the chart is here:

//reset the chart to original specs
$('#resetChart').click(function(){
    chart1.destroy();
    chart1 = new Highcharts.Chart(optionsChart1,highlightSer);
});

highlightSer is a call back function to highlight certain series.

an example of the code which no longer works afterward:

var chart = chart1;
$('#showAll').click(function(){
        for(i=0; i < chart.series.length; i++) {
        chart.series[i].show();
    }
});

thanks!

解决方案

1) is this the right way to destroy and rebuild the chart, or is there a better method?

That's the only way and Highcharts is smart enough so that you don't have to worry about any memory leaks.

2) if this is the way to do it, then how do I get my show/hide/check/uncheck functions to continue to work afterward?

You are recreating the chart but not assigning it to the variable chart again.

$('#resetChart').click(function(){
    chart1.destroy();
    chart1 = new Highcharts.Chart(optionsChart1,highlightSer);
    chart = chart1; // <-------- Add this line here.
});

这篇关于Highcharts / jQuery - 使用原始选项销毁和重建图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！