Question

我正在尝试创建2个同步图表。以下是可用的示例代码：

问题是每次用户按下地图中的某个链接时，我都需要更新2个同步图表。所以我在上面提到的代码我在这个块中调用

$(document).on("submit", "#someform", function(event) {
    var $form = $(this);
    console.log("submit done");
    $.post($form.attr("action"), $form.serialize(), function(response) { 
        // here read the data
        // then here call the function mentioned above from Highcharts site

问题是每次我点击链接时都会创建两个新图表，所以，我最终用8个图表点击4次而不是只有2个。我怀疑问题出在原始代码的这一行：< / p>

$('<div class="chart">')
    .appendTo('#container')
    .highcharts({...`

每次都会添加新的div元素。可以做些什么来纠正这个？谢谢

Answer 1

每次点击“提交”，都会在div中添加新图表。因此，一个简单的解决方案是使用.empty()删除div中的旧图表并添加新图表：

$.post($form.attr("action"), $form.serialize(), function(response) { 
  // remove the old chart
  $('<div class="chart">').empty();
  // add the new chart
  $('<div class="chart">').appendTo('#container').highcharts({...
  });
};

Highcharts同步图表显示多次

1 个答案: