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

可点击半圆图配置问题

highcharts angular

0

Aravinda Meewalaarachchi · 技术社区 · 7 年前

目前我正在做一个需求,用户可以点击一个半圆图的绘图区域,然后进入到应用程序中的一个新页面。我还需要根据对试点区域不同部分的点击给出不同的输出…我已经浏览了Highchart API并提出了一个解决方案,但是我的密码不能用…谁能帮我一下吗。

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

        }
     ]
    }

  );

1 回复 | 直到 7 年前

1

User3250 7 年前

缺少对上下文的绑定,请按以下方式更改单击事件:

events:{
    click: (function(e) {
      console.log(e.point);
      if(e.point.name == "1"){
        alert('Clicked 1');
      }
      else if(e.point.name == "2"){
        alert('Clicked 2');
      }

    }).bind(this)
}