增加突出显示区域的大小存在问题

时间:2018-11-02 07:47:28

标签: javascript highcharts

当前我正在处理一个需求,该用户可以单击半圆图的绘制区域并增加半周期图中的绘制区域的悬停部分的大小。...我已经完成了Highchart API并提出了一个解决方案,但是我的代码snitpet无法正常工作..任何人都可以帮我这个忙。

this.chart = new Highcharts.Chart('container', 
    {
      chart: {
        plotBackgroundColor: null,
        plotBorderWidth: 0,
        height: 400,        
        plotShadow: false
      },
      title: {
        text: '98',
        style: {
          "fontSize": "48px"
        },
        align: 'center',
        verticalAlign: 'middle',
        y: 50
      },
      credits: {
        enabled: false
     },
      tooltip: {
        pointFormat: 'Test: <b>{point.percentage:.1f}%</b>',
        enabled:false
      },
      colors: ['#FF0000', '#FFA500', '#FFFF00'],
      plotOptions: {
        pie: {
          dataLabels: {
            enabled: true,
            distance: -100,
            style: {
              fontWeight: 'bold',
              color: 'white'
            }
          },
          point: {
              events: {
                click: function (e) {
                  alert("Clicked");
                }
              }
            },
          startAngle: -90,
          endAngle: 90,
          center: ['50%', '75%'],
          size: '110%'
        }
      },
      series:[
        {
           data: [
            {y: 1, name:"", id:"0"}, 
            { y: 7, name:"",  id:"1"},
            { y: 2, name:"", id:"2"}
           ],
           innerSize: '65%',
            type: 'pie',

        }
     ]
    }

  );
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

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

enter image description here

1 个答案:

答案 0 :(得分:1)

allowPointSelect属性设置为true:

    plotOptions: {
        pie: {
            allowPointSelect: true
        }
    }

实时演示:http://jsfiddle.net/BlackLabel/h3xskctp/