2014-02-16 2 views
0

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

+0

Вы пробовали пересаживать график по щелчку и изменения настроек, чтобы без сюжетной линии? – sesmic

+0

Извините, я не понял вашу точку зрения. Можете ли вы немного разобраться? – Poles

+0

Вы хотите удалить ярлык, соответствующий строке, на которую вы нажимаете, так? –

ответ

3

Вот что вы можете сделать, чтобы нажать на сюжетный и мгновенно удалено:

В конфигурации XAxis добавьте сюжетный с click события:

xAxis: { 
    plotLines: [{ // mark the weekend 
     id: 'plotLine1', 
     color: 'red', 
     width: 2, 
     value: Date.UTC(2010, 0, 4), 
     events: { 
      click: function(e) { 
       this.axis.removePlotLine(this.id) 
      } 
     } 
    }], 
    tickInterval: 24 * 3600 * 1000, 
    // one day 
    type: 'datetime' 
}, 

Вот скрипка, чтобы показать это работа: Click Here

Чтобы избавиться от линий сетки, вы можете просто покрасить их transparent внутри yAxis конфигурации:

yAxis: { 
    ... 
    gridLineColor: 'transparent', 
} 

РЕДАКТИР новый вопрос: Чтобы удалить строки в этом примере, вы можете просто добавить конфигурации событий к новым сюжетным - как это:

// Inside chart event click function: 
    chart.addPlotLine({ 
     value: event.xAxis[0].value, 
     color: '#'+(Math.random()*0xEEEEEE<<0).toString(16), 
     width: 2, 

     // added label to id so the id is unique: 
     id: 'vertLine_'+label, 
     zIndex: 9999, 

     // added plotLine event click - same as before. 
     events: { 
      click: function(e) { 
       this.axis.removePlotLine(this.id); 
      } 
     }, 
     label : { 
      text : label 
     } 
    }); 

Кроме того, это выглядит, как вы пытаясь сделать диаграмму НЕ добавьте метку, если текст не введен в подсказку. Для этого я бы рекомендовал добавить условие && label != '' в ваш if-statement, поэтому в целом это выглядит как if(label!=null && label != ''). Я получил этот совет от This site.

Вот обновленная скрипка: Click Here.

Примечание: чтобы успешно нажимать на линию каждый раз, наведите левую сторону. Идк, почему, но это сработало лучше для меня. Надеюсь это поможет!

+0

ok ... его штраф, но если я использую динамические данные, и если id не предопределен, то что делать. Этот код может решить проблему удаления серии, но как удалить вертикальную и горизонтальную PLOTLINE? – Poles

+1

Я добавил, как избавиться от линий сетки - просто окрашивая их в белый цвет. И хороший звонок, я буду работать над тем, чтобы избавиться от сюжетной линии [не серии] завтра! Извините, я неправильно прочитал Q –

+0

@ Поля - проверьте обновленный ответ. Теперь, когда вы нажимаете на plotLine, он должен удалить себя! В примере показан вертикальный график plotLine, но эта же идея должна применяться и к горизонтальным линиям печати. –

1

Вы также можете поймать нажмите событие, custom-events plugin и уничтожить SVG элемент (линия + ярлык)

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