Highcharts获得选定的列索引

时间:2012-07-03 18:14:22

标签: javascript jquery highcharts

我有一个柱形图,我希望能够分配一个click事件,它会将window.open()激活到一个动态生成的URL。我有一个数组,其中包含x-Axis的元素,如果我可以获得指向所选列的指针,我可以使用它来生成window.open()的URL。下面是图表的代码。

    $(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();
});

感谢任何帮助。

1 个答案:

答案 0 :(得分:5)

修改

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'
                  }
              }
          });




      });​