2012-07-03 2 views
1

У меня есть диаграмма столбца, и я хотел бы иметь возможность назначить событие click, которое приведет к вызову window.open() для динамически созданного URL-адреса. У меня есть массив, содержащий элементы для x-Axis, которые я могу использовать для создания URL-адреса для window.open(), если я могу получить указатель на выбранный столбец. Ниже приведен код для диаграммы.Highcharts получить выбранный индекс столбца

$(document).ready(function() { 
    chart = new Highcharts.Chart({ 

     chart: { 
      renderTo: 'container', 
      defaultSeriesType: 'column', 
      margin: [50, 50, 350, 50] 
     }, 

     title: { 
      text: 'E-Tags Cause' 
     }, 
     xAxis: { 
      categories: _MyArray2, 
      labels: { 
       rotation: 45, 
       align: 'left', 
       style: { 
        fontSize: '18px', 
        fontFamily: 'Verdana, sans-serif' 
       } 
      } 
     }, 
     yAxis: { 
      title: { 
       text: 'Count' 
      } 
     }, 
     plotOptions: { 
      column: { 
       events: { 
        click: function (event) { 
         window.open('test' + + '.html'); 
        } 
       } 
      } 
     }, 
     series: [{ 
      name: 'E-Tag Count', 
      data: _MyArray, 
      pointWidth: 40, 
      dataLabels: { 
       enabled: true, 
       rotation: 0, 
       color: '#000000', 
       align: 'center', 
       x: -3, 
       y: -2, 
       formatter: function() { 
        return this.y; 
       }, 
       style: { 
        fontSize: '14px', 
        fontFamily: 'Verdana, sans-serif' 
       } 
      } 
     }] 
    }); 
    $('tspan').last().remove(); 
}); 

Любая помощь приветствуется.

+0

Я не очень хорошо знаком с Highcharts, но проверить этот же вопрос: Http: // stackoverflow.com/questions/3524774/highcharts-getting-the-id-of-a-point-when-clicking-on-a-line-chart Вызов 'console.log' объекта' event' и 'th is', которые доступны в обработчике кликов, кажется хорошим местом для начала. – Cecchi

+0

Это также может быть актуально из документов: _Click: срабатывает при нажатии на серию. Это ключевое слово относится к самому объекту серии. Один параметр, событие, передается функции. Это содержит общую информацию о событиях, основанную на jQuery или MooTools, в зависимости от того, какая библиотека используется в качестве базы для Highcharts. Кроме того, event.point содержит указатель на ближайшую точку на графике ._ – Cecchi

ответ

5

EDIT

ADD в point объект после колонки

WORKING JSFIDDLE

$(function() { 
     chart = new Highcharts.Chart({ 

      chart: { 
       renderTo: 'container', 
       defaultSeriesType: 'column' 
      }, 

      title: { 
       text: '' 
      }, 

      xAxis: { 
       categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 
         'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
      }, 

      plotOptions: { 
       column :{ 
        point:{ 
         events:{ 
          click:function(){ 
          window.open(this.x + '.html') ; 
          } 
         } 
        } 
       } 
      }, 

      series: [{ 
       data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 
        135.6, 148.5, 216.4,  194.1, 95.6, 54.4] 
       }], 

       navigation: { 
        buttonOptions: { 
         align: 'center' 
        } 
       } 
      }); 




     });​ 
+0

Уже существует клик даже для самого столбца. Я искал способ создания URL-адреса для window.open (URL), когда загружается эта диаграмма. – boosts

+0

Вы пытаетесь найти способ запустить функцию загрузки диаграммы? –

+0

Нет. Поэтому я хотел бы присвоить window.open (someURL) событие щелчка каждого столбца при создании диаграммы. этот URL-адрес должен быть создан с использованием массива x-Axis. Надеюсь, это имеет смысл. – boosts

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