将鼠标悬停在不属于Highchart-polygon点的区域 [英] Hover on areas not on point in Highchart-polygon

问题描述

我有一个图表，我想包括悬停在区域上，但我发现它只适用于点。

 系列：[{
 name：'Target'，
 type：'polygon'，
 data：[[153,42]，[149，46]，[149，55]，[152 ，
 color：Highcharts.Color（Highcharts.getOptions（）。colors [0]）。setOpacity（0.5）.get（），
 enableMouseTracking：true 
 
}]，
 tooltip：{
 headerFormat：'< b> {series.name}< / b>< br>'，
 pointFormat：'{point.x} cm，{point.y} kg'
} 
  

http://jsfiddle.net/onhfLqdm/3/

由于区域是由点限制，所以我怎么可以悬停区域而不是点？

在每个多边形上悬停时，asker想要显示来自json的数据。要这样做在容器中的div中，请查看这个小提琴

在工具提示中可以使用另一个显示来自json的信息的选项，工具提示可以使用。使用诸如someText之类的名称（如在我的小提琴中）来存储数据并获取它使用工具提示的格式化程序功能

  this.options.someText 
  

在工具提示中查看这个小提琴的数据

旧答案：

  plotOptions ：{
 series：{
 
 events：{
 mouseOver：function（）{
 $（＃polygon）。html（'Moused over Event'） 
 .css（色，绿色）; 
 
 mouseOut：function（）{
 $（＃polygon）。html（'Moused out Event'）
 .css（'color'，'red' ）; 
} 
} 
} 
} 
  

< a href =http://jsfiddle.net/Nishith/onhfLqdm/6/ =nofollow>小提琴链接在这里

I have one chart and i want to include hover on area but i found it works only on point only.

        series: [{
            name: 'Target',
            type: 'polygon',
            data: [[153, 42], [149, 46], [149, 55], [152, 60]], 
            color: Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.5).get(),
            enableMouseTracking: true

        }],
        tooltip: {
            headerFormat: '<b>{series.name}</b><br>',
            pointFormat: '{point.x} cm, {point.y} kg'
        }

http://jsfiddle.net/onhfLqdm/3/

As area is bounded by points so how can i hover area instead of points?

解决方案

Update On hover on each polygon asker wants to show data coming from json.To do so in a div out of container please view this fiddle

In Tooltip One more option to show some info coming from json ,tooltip can be used.Put your data using some name like "someText" (as in my fiddle )and get it in formatter function of tooltip using

  this.options.someText 

See this fiddle for data in tooltiip

Old Answer:

 plotOptions: {
        series: {

            events: {
                mouseOver: function () {
                     $("#polygon").html('Moused over Event')
                        .css('color', 'green');
                },
                mouseOut: function () {
                    $("#polygon").html('Moused out Event')
                        .css('color', 'red');
                }
            }
        }
    }

Fiddle link is here

这篇关于将鼠标悬停在不属于Highchart-polygon点的区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！