ハイチャートでツールヒントをonclickイベントに変換するにはどうすればよいですか？

Question

I have an column highchart on mouseover entire month values are showing i want one place value on click eventマウスオーバー機能があります。ハイチャートのマウスクリックイベントに関するツールチップが必要です。

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

をクリックしてマウスオーバー機能を変更し、次の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] 
    }] 

}); 

ここでハイチャートAPIを見つけることができます。 http://api.highcharts.com/highcharts/plotOptions.series.events.click