javascript - 使用按钮更改 Highcharts 选项

Question

我正在进行一个复杂的首次项目，并且仍在学习 highcharts。我正在使用 highcharts 来显示来自网络服务器的数据。用户选择他想要查看的数据系列并将其显示在图表中。

我想要有几个复选框和下拉菜单，用户可以从中选择来改变 Highcharts 的呈现方式。包括y轴0和1的线型。 (实线、点线、虚线等)，图表中的系列是否有点，类似于 Chart.options.line.marker.enabled = true/false。

我很难理解 API，因为我对此还是新手。

例如，检查和取消检查行标记当前看起来像这样，尽管它不起作用。它返回Uncaught TypeError:无法读取未定义的属性“marker”

var chart = $(newDisplay).find('.chartWrapper').highcharts()

$(newDisplay).on('click', '.chkShowLinePoints', function () { //delegate to checkbox
    if ($(this).prop('checked')) { //ON
        chart.options.line.marker.enabled = true

    } else { //OFF
        chart.options.line.marker.enabled = false
    }
})

图表本身是在其他地方构建的并且运行良好。我只是不明白如何更改图表选项。创建后可以更改的内容是否有限？

我可以添加和删除一条绘图线来标记图表上的当前日期和时间，但这是因为 highcharts 中的 addPlotLine 和 removePlotLine 函数。我正在寻找其他类型的选项

.on('click', '.chkMarkCurrentTime', function () {            
    if ($(this).prop('checked')) { //ON
        chart.xAxis[0].addPlotLine({
            color: '#ddd',
            width: 1,
            value: new Date().getTime(),
            id: 'plot-line-1'
        });
    } else { //OFF
        chart.xAxis[0].removePlotLine('plot-line-1');
    }
})

Answer 1

由于这是一个广泛的问题，并且有多个 API 调用，我将向您指出您可以通过 series\[N\].update() 进行的系列选项更改。 。这取决于您要尝试更新的内容。您的行上标记未显示的问题是语法错误:

chart.options.line.marker.enabled

应该变成:

chart.options.plotOptions.line.marker.enabled

我建议在点击事件中执行 console.log(chart); ，以便您可以查看图表对象的格式。