Question

忽略英语错误。我想制作可点击的圆环图。如果我点击一个切片，它应该朝下一页（如url（a href））。我试过编码。但这只适用于高亮条。

Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
    text: 'Click points to go to URL'
  },
  xAxis: {
    type: 'category'
  },
  plotOptions: {
    series: {
      cursor: 'pointer',
      point: {
        events: {
          click: function() {
            location.href = 'https://en.wikipedia.org/wiki/' +
              this.options.key;
          }
        }
      }
    }
  },

  series: [{
    data: [{
      y: 29.9,
      name: 'USA',
      key: 'United_States'
    }, {
      y: 71.5,
      name: 'Canada',
      key: 'Canada'
    }, {
      y: 106.4,
      name: 'Mexico',
      key: 'Mexico'
    }]
  }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>

Answer 1

给出圆环图的id，然后使用jquery或javascript函数进行klick事件

像这样：

<div id="clickme" style="width:100px;height:100px;background-color:black;">

</div>

$( "#clickme" ).click(function() {
  location.href = 'https://en.wikipedia.org/wiki/';
});

Answer 2

使用chart: { type: 'pie' }与innerSize: '50%'一起制作甜甜圈。

以下是一个例子：

Highcharts.chart('container', {
  chart: {
    type: 'pie'
  },
  title: {
    text: 'Click points to go to URL'
  },
  xAxis: {
    type: 'category'
  },
  plotOptions: {
    series: {
      innerSize: '50%',
      cursor: 'pointer',
      point: {
        events: {
          click: function() {
            location.href = 'https://en.wikipedia.org/wiki/' +
              this.options.key;
          }
        }
      }
    }
  },

  series: [{
    
    data: [{
      y: 29.9,
      name: 'USA',
      key: 'United_States'
    }, {
      y: 71.5,
      name: 'Canada',
      key: 'Canada'
    }, {
      y: 106.4,
      name: 'Mexico',
      key: 'Mexico'
    }]
  }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 300px"></div>

Highcharts有一个非常good documentation，所以我建议你先阅读它，这样你就可以自己回答这些问题了。

如何制作甜甜圈图表可点击

2 个答案: