javascript 将 Highcharts 重置为初始状态

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/10703325/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 10:45:46  来源:igfitidea点击:

Resetting Highcharts to initial state

javascriptjqueryhighcharts

提问by Gregg B

Creating my Highchart with preset options works fine:

使用预设选项创建我的 Highchart 工作正常:

chart = new Highcharts.Chart(options);

However, when I want to destroy and recreate the chart it only destroys. Even if I remove chart.destroy();the chart is still just completely blanked but not recreated.

但是,当我想销毁并重新创建图表时,它只会破坏。即使我删除chart.destroy();图表仍然只是完全空白但没有重新创建。

$('#resetChart').on("click", function(e){
    e.preventDefault();
    chart.destroy();
    chart = new Highcharts.Chart(options);
});

A little stuck here on how to reset this chart.

关于如何重置此图表有点卡在这里。

Edit::

编辑::

Inspecting the chart container shows the Pie charts is creating somethinghere but doesn't seem to be retrieving the data properly. Do I need to pass in my data variable again as well even though it's set in the options?

检查图表容器显示饼图在这里创建了一些东西,但似乎没有正确检索数据。即使在选项中设置了我的数据变量,我是否还需要再次传入它?

series: [{
                name: name,
                data: data,
                /* changes bar size */
                pointPadding: 0,
                borderWidth: 0,
                pointWidth: 15,
                shadow: false
        }]

Then data is defined on the page (For our CMS):

然后在页面上定义数据(对于我们的 CMS):

<script type="text/javascript">
        data = [
            {
                y: {value},
                name: 'field1',
                id:'1'
            },
            {
                y: {value},
                name: 'field2',
                id:'2'
            },
            {
                y: {value},
                name: 'field3',
                id:'3'
            }
        ];
    </script>

回答by undefined

$('#resetChart').on("click", function(e){
    e.preventDefault();
    while(chart.series.length > 0) chart.series[0].remove(true);
    chart = new Highcharts.Chart(options);
});

http://jsfiddle.net/tapkr/1

http://jsfiddle.net/tapkr/1

回答by Ricardo Alvaro Lohmann

When you create your chart for the first time you pass some options thrue the parameter, you can save them into an var and when you want to create again you use the same options like the following code.

当您第一次创建图表时,您可以通过参数传递一些选项,您可以将它们保存到一个 var 中,当您想再次创建时,您可以使用与以下代码相同的选项。

var defaultOptions = {
    // your options
};

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

drawDefaultChart();

$('#resetChart').on("click", function(e){
    e.preventDefault();
    chart.destroy();
    drawDefaultChart();
});

You can see it working here.

你可以看到它在这里工作。