如何將工具提示轉換爲高圖表中的onclick事件？

Question

I have an column highchart on mouseover entire month values are showing i want one place value on click event我有鼠標功能。我需要關於Highcharts中鼠標點擊事件的工具提示。

Highcharts.chart('container', { 
    title: { 
     text: 'Mouse events demo' 
    }, 
    subtitle: { 
     text: 'On point mouse click, the values should be reported in top left' 
    }, 
    plotOptions: { 
     series: { 
      point: { 
       events: { 
        mouseOver: function() { 
         var chart = this.series.chart; 
         if (!chart.lbl) { 
          chart.lbl = chart.renderer.label('') 
           .attr({ 
            padding: 10, 
            r: 10, 
            fill: Highcharts.getOptions().colors[1] 
           }) 
           .css({ 
            color: '#FFFFFF' 
           }) 
           .add(); 
         } 
         chart.lbl 
          .show() 
          .attr({ 
           text: 'x: ' + this.x + ', y: ' + this.y 
          }); 
        } 
       } 
      }, 
      events: { 
       mouseOut: function() { 
        if (this.chart.lbl) { 
         this.chart.lbl.hide(); 
        } 
       } 
      } 
     } 
    }, 
    tooltip: { 
     enabled: false 
    }, 
    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] 
    }] 
}); 

該代碼也可在JSFiddle。而不是鼠標懸停我想單擊事件。

Answer 1

與下面的代碼

Highcharts.chart('container', { 
title: { 
    text: 'Mouse events demo' 
}, 
subtitle: { 
    text: 'On point mouse over or mouse out, the values should be reported in top left' 
}, 
plotOptions: { 
    series: { 
     point: { 
      events: { 
       click: function() { 
        var chart = this.series.chart; 
        if (!chart.lbl) { 
         chart.lbl = chart.renderer.label('') 
          .attr({ 
           padding: 10, 
           r: 10, 
           fill: Highcharts.getOptions().colors[1] 
          }) 
          .css({ 
           color: '#FFFFFF' 
          }) 
          .add(); 
        } 
        chart.lbl 
         .show() 
         .attr({ 
          text: 'x: ' + this.x + ', y: ' + this.y 
         }); 
       } 
      } 
     }, 
     events: { 
      mouseOut: function() { 
       if (this.chart.lbl) { 
        this.chart.lbl.hide(); 
       } 
      } 
     } 
    } 
}, 

tooltip: { 
    enabled: false 
}, 

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

替換在撥弄JavaScript部分只是改變了鼠標懸停功能，點擊

Answer 2

在這裏，你需要修改兩處的東西。

1. Click事件：我有表演的警報在這兒，你可以根據任何你想要顯示工具提示您的格式採取行動
2. 禁用工具提示：這是隱藏在鼠標移動默認刀尖

小提琴演示：http://jsfiddle.net/77mq9k3a/2/

代碼片段：

Highcharts.chart('container', { 

    title: { 
    text: 'Mouse events demo' 
    }, 
    subtitle: { 
    text: 'On point mouse click, the values should be reported in top left' 
    }, 
    plotOptions: { 
    series: { 
     cursor: 'pointer', 
     events: { 
     click: function(event) { 
      alert(
      this.name + ' clicked\n' + 
      'Alt: ' + event.altKey + '\n' + 
      'Control: ' + event.ctrlKey + '\n' + 
      'Meta: ' + event.metaKey + '\n' + 
      'Shift: ' + event.shiftKey 
     ); 
     } 
     } 
    } 
    }, 

    tooltip: { 
    enabled: false 
    }, 

    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] 
    }] 

}); 

您可以在這裏找到highchart API。 http://api.highcharts.com/highcharts/plotOptions.series.events.click