javascript - 是否可以通过径向坐标定义图像映射区域？

Question

我熟悉用于 HTML 页面的在线图像映射生成器。当您创建矩形或圆形区域时，它们很方便。

但是，如果您的区域呈饼状，则事情会变得有点复杂。例如，如果我有这个形状并且我想让每个饼图切片成为一个单独的区域，这就是我使用在线图像映射生成器时图像映射代码的样子。

<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>

这是在圆形上使用直 Angular 坐标时的缺点:与径向坐标相比，定义饼图切片需要更多的点。例如，我可以用(中心 x、中心 y、半径、 Angular 起点、 Angular 终点)定义一个饼图切片。

有没有办法用径向坐标定义一个区域，或者这在 HTML 中是不可能的？根据我的阅读，shape="circle" 仅用于真正的圆而不是圆的一部分。

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

Answer 1

您真的需要使用图像映射吗？您可以在 highchart 设置中使用 point.events 来检测点击并使用 window.location 重定向用户。我编写了代码以输出到控制台 onclick 而不是重定向。 (抱歉，我做了一个精心制作的演示，我只是选择了一个 highchart 演示，而不是从头开始。)

$(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>