2014-12-12 1 views
0

Я пытаюсь получить текст метки на оси х-х, щелкнув по ней. Я использую гистограмму и код выглядит следующим образом:добавить событие к символам оси x в баре highchart

var chart = new Highcharts.Chart({ 
    chart: { 
     type: 'column', 
     backgroundColor: '#eaedf1', 
     zoomType: 'x', 
     renderTo: 'container' 
    }, 
    plotOptions: { 
     series: { 
      cursor: 'pointer', 
      pointWidth: 10, 
      point: { 
       events: { 
        click: function (event) { 
         console.log(event.point.name + " " + this.y); 
        } 
       } 
      } 
     } 
    }, 
    title: { 
     text: 'Total Flow Types' 
    }, 
    xAxis: { 
     type: 'category', 
     labels: { 
      rotation: -90 
     } 

    }, 
    yAxis: { 
     min: 0, 
     title: { 
      text: 'millions' 
     } 
    }, 
    legend: { 
     enabled: false 
    }, 
    series: [{ 
     name: 'Flow Types' 
    }] 
}); 

Затем, нажав на кнопку график их получает с помощью Ajax, который работает отлично. Проверяя dom диаграммы, я увидел, что каждая из надписей - текст/текст. Они являются частью g/element с надписями highcharts-xaxis. Таким образом, я попытался извлечения значений с помощью JQuery, как:

$('body').on('click', 'g.highcharts-axis-labels.highcharts-xaxis-labels text', function() { 
    console.log($(this).text()); 
}); 

или просто

$('body').on('click', 'text', function() { 
    console.log($(this).text()); 
}); 

все это часть document.ready функции. К сожалению, ни один из них не извлекает текст метки оси x?

+0

Не могли бы вы опубликовать живой пример, например jsFiddle? –

+0

нечего писать. Если вы скопируете и вставляете мой код диаграммы и предоставляете некоторые данные примера, вы увидите, что он производит – george

ответ

6

Вместо:

$('body').on('click', 'g.highcharts-axis-labels.highcharts-xaxis-labels text', function() { 
    console.log($(this).text()); 
}); 

Используйте это:

$('.highcharts-xaxis-labels text').on('click', function() { 
    console.log($(this).text()); 
}); 

Вы не должны соединить классы highcharts-axis-labels и highcharts-xaxis-labels с dot. А также класс highcharts-xaxis-labels достаточно, чтобы добавить мероприятие. Вот скрипка: http://jsfiddle.net/8sxLr5j8/

+1

@george, чтобы прокомментировать или принять ??? –

+0

не работает – george

+0

Это сработало для меня. благодаря – Kabulan0lak

1

Вы можете использовать extension, который позволяет это делать.

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