Highcharts：顯示圖例懸停的工具提示

我有我的Highchart如下，有沒有一種方法來顯示圖例懸停的工具提示，就像我們懸停在一個切片時一樣。 https://plnkr.co/edit/yzXLz7AIDoWa1Pzxxl4k?p=preview Highcharts：顯示圖例懸停的工具提示

我的提示代碼：

tooltip: { 
    positioner: function(x, y){ 
     var center = this.chart.series[0].center; 
     console.log(this, arguments); 
     return { x: center[0] - x/2, y: center[1] + y/2 }; 
    }, 
    formatter: function() { 
     return '<b>'+ this.point.name +'</b>: '+ Math.round(this.percentage*100)/100 + ' %'; 
    } 
}

來源

2017-04-19 indra257

你已經在你的代碼中加入自舉這樣使用Bootstrap tooltip和圖表的onload函數添加下面的代碼，

var legend = chart.legend; 
for (var i = 0, len = legend.allItems.length; i < len; i++) { 
    (function(i) { 
     var t=legend.allItems[i], 
      content= '<b>'+ t.name +'</b>: '+ Math.round(t.percentage*100)/100 + ' %'; 
      jQuery($(t.legendItem.element)).tooltip({title:content,html:true}); 
    })(i); 
}

Plnkr Demo

來源

2017-04-20 05:41:54

您可以使用Black Label的自定義事件插件，計算點擊標籤的索引並用tooltip.refresh()方法顯示工具提示。

var options = { 
 
    xAxis: { 
 
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
 
     'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' 
 
    ], 
 
    labels: { 
 
     events: { 
 
     click() { 
 
      const label = this 
 
      const chart = this.chart 
 
      const data = this.axis.series[0].data 
 
      const { categories } = this.axis 
 
      const i = categories.indexOf(label.value) 
 
      if (i !== -1) chart.tooltip.refresh(data[i]) 
 
     }, 
 
     } 
 
    } 
 
    }, 
 
    series: [{ 
 
    minPointLength: 10, 
 
    data: [900, 0.1], 
 
    type: 'column' 
 
    }] 
 
} 
 

 
var chart = Highcharts.chart('container', options)

<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<script src="https://blacklabel.github.io/custom_events/js/customEvents.js"></script> 
 

 
<div id="container"></div>

來源

2017-04-20 12:57:46 stpoa

我把它實際上與鼠標懸停事件模式，這是你如何能做到這一點，請在您的圖表功能，插入此代碼：

$('#chart_container').on('mouseenter','.highcharts-legend-item',function(event) { 
    var seriesName = $(this).text(); 
    if (seriesName === "this_series_name") { 
     $('#myModal').modal('toggle'); 
    } 
});

然後你可以讓一個模式div打開懸停事件，如下面的這個一樣

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> 
        × 
       </button> 
       <h4 class="modal-title" id="myModalLabel">Note</h4> 
      </div> 
      <div class="modal-body"> 

       <div class="row"> 
        <div class="col-md-12"> 
         your message here 
        </div> 
       </div> 

      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal"> 
        Ok 
       </button> 
      </div> 
     </div> 
    </div> 
</div>

這是一個demo

來源

2017-07-30 23:42:59

Highcharts：顯示圖例懸停的工具提示

回答

相關問題