使用按钮更改 highcharts 选项答案

【问题标题】：Changing highcharts options with buttons使用按钮更改 highcharts 选项
【发布时间】：2015-06-09 13:07:41
【问题描述】：

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

我希望有几个复选框和下拉菜单，用户可以从中选择以更改高图的呈现方式。包括 yAxis 0 和 1 的线型。（实线、点线、虚线等），天气图表中的系列有点，类似于Chart.options.line.marker.enabled = true/false。

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

例如，检查和取消检查线标记目前看起来像这样，尽管它不起作用。它返回Uncaught TypeError: Cannot read property 'marker' of undefined

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');
    }
})

【问题讨论】：

标签： javascript jquery highcharts

【解决方案1】：

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

chart.options.line.marker.enabled

应该变成：

chart.options.plotOptions.line.marker.enabled

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

【讨论】：

完美！正是我需要的方向。

【解决方案2】：

要动态更改图表，您可以使用“方法和属性”部分 API 参考中列出的 API 函数（开始于：http://api.highcharts.com/highcharts#Axis）

也可以通过手动更改某些图表选项或使用内部未记录的选项来更改图表，但更简单的方法通常是使用新选项重建图表。

要开始使用 Highcharts，您可能会发现有用的通用文档：http://www.highcharts.com/docs

【讨论】：