javascript - 如何将网格线添加到 highcharts 中已生成的图表中？

Question

我有一个已经生成的气泡图。我需要根据用户可以选择的复选框在同一图表上添加/删除网格线。

我尝试了类似以下的方法，但没有成功。

setTimeout(function () {
    var chart = $('#bubble-chart-container').highcharts();
    chart.options.xAxis[0].gridLineWidth = 1;
    chart.options.yAxis[0].gridLineWidth = 1;
    chart.reflow();
}, 500);

Answer 1

您将需要使用 chart.update ( API link ) 方法，如下所示:

HTML

<div id="container"></div>
<button id="addButton">Add lines</button>
<button id="removeButton">Remove lines</button>

Javascript

var chart = Highcharts.chart('container', {
  ...
});


$('#addButton').click(function() {
  chart.update({
    xAxis:{
        gridLineWidth: 1
    },
    yAxis:{
        gridLineWidth: 1
    }
  });
});

$('#removeButton').click(function() {
  chart.update({
    xAxis:{
        gridLineWidth: 0
    },
    yAxis:{
        gridLineWidth: 0
    }
  });
});

Fiddle