可以用径向坐标来定义图像地图区域吗？

Question

我熟悉用于HTML页面的在线Imagemap生成器。当您创建矩形或圆形区域时，它们非常方便。

然而，如果你的区域是饼状的，它会使事情变得更复杂。例如，如果我有这个形状，并且我想让每个饼片成为一个单独的区域，这就是当我使用在线图像地图生成器时图像地图代码的样子。

<img src="url/to/your/image.jpg" alt="" usemap="#Map" />
<map name="Map" id="Map">
    <area alt="Slice1" title="Slice1" href="#" shape="poly" coords="149,2,146,294,40,250,4,172,14,85,73,23" />
    <area alt="Slice2" title="Slice2" href="#" shape="poly" coords="153,1,251,38,286,86,299,148,287,207,244,264,206,283,155,295" />
</map>

​

这是在圆形形状上使用直角坐标时的缺点:定义饼片需要比径向坐标所需的更多的点。例如，我可以定义一个饼片(中心x，中心y，半径，角度开始，角度结束)。

是否有一种方法来定义具有径向坐标的区域，或者在HTML中不可能这样做？据我所知，shape="circle"只用于真正的圆圈，而不是圆圈的一部分。

我准备接受这样的回答：“不，这在HTML中是不可能的。”如果是这样的话，在HTML页面上是否有实现相同结果的替代方法？

Answer 1

你真的需要使用图像地图吗。您可以在高图集设置中使用point.events来检测单击，并使用window.location重定向用户。我编写了代码，将其输出到控制台，而不是重定向。(对于一个精心制作的演示，我很抱歉，我只是选择了一个高图表演示，而不是从头开始。)

​

$(function() {
  $('#container').highcharts({
    chart: {
      plotBackgroundColor: null,
      plotBorderWidth: null,
      plotShadow: false,
      type: 'pie'
    },
    title: {
      text: 'Browser market shares January, 2015 to May, 2015'
    },
    tooltip: {
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
      pie: {
        allowPointSelect: true,
        cursor: 'pointer',
        dataLabels: {
          enabled: true,
          format: '<b>{point.name}</b>: {point.percentage:.1f} %',
          style: {
            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
          }
        }
      }
    },
    series: [{
      name: 'Brands',
      point: {
        events: {
          click: function() {
            //location.href = this.options.url;
            console.log(this.options.url);
          }
        }
      },
      colorByPoint: true,
      data: [{
        name: 'Microsoft Internet Explorer',
        y: 56.33,
        url: "http://www.example.com/ie"
      }, {
        name: 'Chrome',
        y: 24.03,
        sliced: true,
        selected: true,
        url: "http://www.example.com/chrome"
      }, {
        name: 'Firefox',
        y: 10.38,
        url: "http://www.example.com/firefox"
      }, {
        name: 'Safari',
        y: 4.77,
        url: "http://www.example.com/safari"
      }, {
        name: 'Opera',
        y: 0.91,
        url: "http://www.example.com/opera"
      }, {
        name: 'Proprietary or Undetectable',
        y: 0.2,
        url: "http://www.example.com/other"
      }]
    }]
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>

​

Answer 2

将区域定义为饼片+ jquery的一个小片段，将其转换为多格式。

https://jsfiddle.net/vxmok40g/4/

<!-- a pie-slice, 
centered at {x:150, y:150} 
with a radius of 150px 
startangle: 0° 
turning 180° clockwise -->
<area alt="Slice1" title="Slice1" href="#right" shape="pie" coords="150,150,150,0,180" />