将高图重置为初始状态

Resetting Highcharts to initial state

本文关键字：初始状态 高图重      更新时间：2023-09-26

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

chart = new Highcharts.Chart(options);

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

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

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

编辑：：

检查图表容器显示饼图正在创建某些内容，但似乎没有正确检索数据。即使数据变量已在选项中设置，我是否需要再次传入数据变量？

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

然后在页面上定义数据(对于我们的 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>

$('#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

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

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

您可以在此处看到它的工作。

相关文章：