javascript - Why isn't my highcharts chart getting resetdestroyed properly? - Stack Overflow

admin管理员组

文章数量:1289911

In my code I'm initializing the chart like this...

<script type="text/javascript">
var chart = null,
defaultOptions = {
chart: etc etc
};


function drawDefaultChart() {
    chart = new Highcharts.Chart(defaultOptions);
}

$(function() {
    $(document).ready(function() {
        drawDefaultChart();
    });
});

</script>

then in the body I have

<a href="#" onclick="drawDefaultChart()">Reset</a>

but when you click the link, all it does is redraw the graph with the settings from the previous state... I'm not quite sure what is going on. If I add chart.destroy(); the chart doesn't work at all...

function drawDefaultChart() {
    chart.destroy();  //this makes the chart not work at all
    chart = new Highcharts.Chart(defaultOptions);
}

You can clearly see that I 'm pasing default options to the chart that is suppose to get redrawn.... I don't understand why it uses the old filter settings, i'm about to jump off a bridge, can somebody PLEASE HELP?

my live example is here

//////// UPDATE

I was able to do it with a lot of blood, sweat, and tears. I ended up putting the data into a php variable on another page (to save real estate), and then calling it using php variables, and then I just call it everytime someone clicks a link. I figured out that in order to redraw the graph, you have to reload ALL the data in each time. The PHP makes this easier in terms of amount of data on the screen.

this was the link that eventually helped me figure it out. /

In my code I'm initializing the chart like this...

<script type="text/javascript">
var chart = null,
defaultOptions = {
chart: etc etc
};


function drawDefaultChart() {
    chart = new Highcharts.Chart(defaultOptions);
}

$(function() {
    $(document).ready(function() {
        drawDefaultChart();
    });
});

</script>

then in the body I have

<a href="#" onclick="drawDefaultChart()">Reset</a>

but when you click the link, all it does is redraw the graph with the settings from the previous state... I'm not quite sure what is going on. If I add chart.destroy(); the chart doesn't work at all...

function drawDefaultChart() {
    chart.destroy();  //this makes the chart not work at all
    chart = new Highcharts.Chart(defaultOptions);
}

You can clearly see that I 'm pasing default options to the chart that is suppose to get redrawn.... I don't understand why it uses the old filter settings, i'm about to jump off a bridge, can somebody PLEASE HELP?

my live example is here http://goo.gl/sGu0M

//////// UPDATE

I was able to do it with a lot of blood, sweat, and tears. I ended up putting the data into a php variable on another page (to save real estate), and then calling it using php variables, and then I just call it everytime someone clicks a link. I figured out that in order to redraw the graph, you have to reload ALL the data in each time. The PHP makes this easier in terms of amount of data on the screen.

this was the link that eventually helped me figure it out. http://jsfiddle/dane/YUa3R/34/

• javascript
• jquery
• highcharts

Share Improve this question Follow edited Apr 10, 2013 at 14:25 D3Chiq asked Apr 9, 2013 at 18:42 D3ChiqD3Chiq 2,19355 gold badges1717 silver badges2020 bronze badges 7

• $(function() $(document).ready(function() { - ready handler in a ready handler? hmmm – Mark Schultheiss Commented Apr 9, 2013 at 18:54
• WHERE do you change default options? no where that I can see, so it simply re-executes the same thing...each time you click that link – Mark Schultheiss Commented Apr 9, 2013 at 18:56
• shouldn't my initial "defaultOptions" brace set the options as a snapshot? – D3Chiq Commented Apr 9, 2013 at 18:58
• I mean, to follow up to your point... i DON'T change the default options... so when you click the button, shouldn't it reset the graph to the ... default options when it was drawn the first time? That is my thinking here. – D3Chiq Commented Apr 9, 2013 at 19:01
• I don't understand, are you saying that I have to use a fresh new set of options when I use that function? How can you go about doing this without making the code messy? – D3Chiq Commented Apr 9, 2013 at 20:07

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 6

Always it's remend to refer API documentation.

use following snippet to destroy the chart $('#container').highcharts().destroy();

Click here for a working solution.

First off, I know NOTHING about highcharts, but it would seem you need: (from your actual page)

function drawDefaultChart() {
$("#container").empty();
    chart = new Highcharts.Chart(defaultOptions);
}

to be

function drawDefaultChart() {
    $("#container").empty().highcharts(defaultOptions);
}

OR perhaps:

function drawDefaultChart() {
    $("#container").highcharts(defaultOptions);
}

本文标签： javascriptWhy isn39t my highcharts chart getting resetdestroyed properlyStack Overflow