代码之家 › 专栏 › 技术社区 › Aravinda Meewalaarachchi

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

highcharts javascript

2

Aravinda Meewalaarachchi · 技术社区 · 7 年前

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>

1 回复 | 直到 7 年前

1

ppotaczek 7 年前

套 allowPointSelect 属性为真:

    plotOptions: {
        pie: {
            allowPointSelect: true
        }
    }

现场演示: http://jsfiddle.net/BlackLabel/h3xskctp/