使用按钮更改highcharts选项

时间:2015-06-09 13:07:42

标签: javascript jquery highcharts

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

我希望有一些复选框和下拉菜单,用户可以从中选择以改变高清图的显示方式。包括yAxis 0和1的线条样式。 (实心,溺爱,虚线等),天气图表中的系列有点,select * from table_name where str_to_date(season_from_date,'%m/%d/%Y') between str_to_date('06/09/2015','%m/%d/%Y') and str_to_date('06/11/2015','%m/%d/%Y')

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

例如,检查和取消选中行标记当前是这样的,虽然它不起作用。它返回Chart.options.line.marker.enabled = true/false

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 } }) addPlotLine功能。我正在寻找其他类型的选项

removePlotLine

2 个答案:

答案 0 :(得分:2)

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

chart.options.line.marker.enabled

应该成为:

chart.options.plotOptions.line.marker.enabled

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

答案 1 :(得分:1)

要动态更改图表,您可以使用API​​参考中列出的API函数"方法和属性" (从http://api.highcharts.com/highcharts#Axis开始)

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

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