ハイチャートを使用してサブタイトルまたは円グラフのタイトルにマウスをホバーする方法

私の要件は、円グラフのサブタイトル上のマウスのホバー上の各円のスライスの色を含むdivを表示することです。私はhighchart.jsを使用しています。これを達成する方法。助けてください。ハイチャートを使用してサブタイトルまたは円グラフのタイトルにマウスをホバーする方法

Please find the attached image for mor information

出典

2017-02-20 Manish Gupta

に行きます。あなたは、ロードイベントでそれを行うことができます。次に、すべての情報とスタイルを含むdivを作成する必要があります。

chart: { 
    events: { 
     load: function() { 
     const menu = document.createElement('div'); 
     menu.style.cssText = 'left:' + (this.plotLeft + this.plotWidth * 0.5) + 'px; top:' + (this.plotTop + this.plotHeight * 0.1) + 'px; position: absolute; display: none; background-color:white; padding: 20px'; 

     let str = ''; 

     this.series[0].data.forEach(point => { 
      str += '<p><div style="display:inline-block;padding-right: 10px;width:10px;height:10px;background-color:' + point.color + ';background-clip:content-box;"></div>' + point.name + '</p>' 
     }); 

     str += ''; 
     menu.innerHTML = str; 
     this.renderTo.appendChild(menu); 

     this.subtitle.on('mouseenter', function(e) { 
      menu.style.display = 'block'; 
     }) 
     } 
    } 
    },

例：http://jsfiddle.net/farucbbu/

出典

2017-02-20 12:29:23 morganfree

でサブタイトルである「すべてのラベル」の上でマウスホバーでツールチップを表示することですこれは私が望んでいたものですありがとうございました。しかし、私はthis.series [0] .data.forEachの値を得ることができません（ポイント=> {、.... this.series [0]は私がコンソールにチェックインしたときに私に未定義を与えています。 –

チャートにシリーズをロードしましたか？コールバック内の参照先を確認してください – morganfree

私のコードはフィーリングの例で見つけてください：http://jsfiddle.net/j43sr6hk/1/間違っています。chart.addSeries（{...}）メソッドを使用してシリーズを動的にロードしています。 –

使用ツールチップオプション。詳細については

tooltip: { 
    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' 
    backgroundColor: '#FCFFC5', 
    borderColor: 'black', 
    borderRadius: 10, 
    borderWidth: 3 
}

あなたは字幕/タイトル上のMouseEnterイベントを添付する必要が http://www.highcharts.com/docs/chart-concepts/tooltip

出典

2017-02-20 09:14:14 Taras

私の要件は、添付された画像 –

ハイチャートを使用してサブタイトルまたは円グラフのタイトルにマウスをホバーする方法

答えて

関連する問題