2015-06-09 4 views
0

У меня есть сложный первый проект, и я все еще изучаю высокие диаграммы. Я использую 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 
    } 
}) 

Сама схема построена в другом месте и работает нормально. Я просто не понимаю, как я могу изменить параметры диаграммы. Что вы можете изменить после создания ограничено?

Я могу добавить и удалить сюжетную линию, чтобы отметить текущую дату и время на графике, но это из-за функции 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'); 
    } 
}) 

ответ

2

Поскольку это широкий вопрос, и есть несколько вызовов API я просто указать вам варианты серии изменений, которые можно сделать с помощью series\[N\].update(). Это зависит от того, что вы пытаетесь обновить. Ваш вопрос с маркером на линии не показывает, является синтаксической ошибкой:

chart.options.line.marker.enabled 

должны стать:

chart.options.plotOptions.line.marker.enabled 

Я рекомендую делать console.log(chart); внутри ваших событий щелчка, так что вы можете увидеть форматирование диаграммы объект.

+0

безупречный! просто направление, в котором я нуждался. – NachoDawg

1

Чтобы изменить диаграмму динамически вы можете использовать функции API, перечисленные в ссылке API в разделе «Методы и свойства» (начиная с: http://api.highcharts.com/highcharts#Axis)

It также можно изменить график, изменив некоторые параметры диаграммы вручную или используя внутренние, недокументированные параметры, но более простой способ - это, как правило, перестроение диаграммы с новыми параметрами.

Чтобы начать работу с Highcharts вы можете найти полезную Общую документацию: http://www.highcharts.com/docs

Смежные вопросы