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"仅用于真正的圆圈，而不是圆圈的一部分。

我准备接受一个答案，＆＃34;不能用HTML来表达它。＆＃34;如果是这种情况，是否有另一种方法可以在HTML页面上实现相同的结果？

Answer 1

你真的需要使用图像地图吗？您可以在高图设置中使用point.events来检测单击并使用window.location重定向用户。我写了代码输出到控制台onclick而不是重定向。（很抱歉，我只是选择了一个高级演示，而不是从头开始。）

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

是否可以通过径向坐标定义图像地图区域？

2 个答案: