Question

我们如何将饼图切片作为超链接或如何在切片上至少显示手形光标。

检查下面的代码。我正在使用amcharts创建一个饼图。

var initChart = function() {
        if (chart) chart.destroy();
        var config = scope.config || {};

        chart = AmCharts.makeChart(scope.chartid, {
          "type": "pie",
          "theme": "light",
          "marginTop": 10,
          "marginBottom":10,

          "allLabels": [{
            "text": scope.index,
            "color": "green",
            "bold" : true,
            "align": "center",
            "size": 20,
            "y": 190,



          }],
          "dataProvider":scope.chartdata,

          "titleField": "title",
          "valueField": "percent",

          "fontSize": 14,
          "labelRadius": 10,
          "radius": "25%",
          "innerRadius": "45%",
          "labelText": "[[title]]",
           "balloonText":"Sales Amt: $[[amt]]",
            "showHandOnHover":true,
          "export": {
            "enabled": true
          },


          "responsive": {
            "enabled": true,
            "addDefaultRules": false,
            "rules": [
              {
                "maxWidth": 400,
                "overrides": {
                  "fontSize": 6,
                  "labelRadius": 5,
                  "radius": "20%",
                  "innerRadius": "40%",
                  "allLabels": [{
                    "text": "1.02",
                    "color": "green",
                    "bold" : true,
                    "align": "center",
                    "size": 10,
                    "y": 210,



                  }]
                }
              }
            ]
          },

          "pullOutOnlyOne":true,
          "startEffect":"easeOutSine",
          "pullOutEffect":"easeOutSine",
         "listeners": [{
            "event": "clickSlice",
            "method": function(e) {

              var dp = e.dataItem.dataContext;

              scope.selectoption1=dp.title;

              if(scope.selectoption1!="OTHERS"){

                var object ={

                "title":scope.selectoption1,
                "id":dp.id

              }


                $rootScope.$emit('selecteddonutchartdep', object);

              }



              e.chart.validateData();
            }
          }]


        })

      };

有没有办法在饼图切片上显示手形光标

Answer 1

将其添加到CSS

中

#chartdiv {
  cursor: pointer;
}

它应该为您提供您想要的内容，但是将代码添加到您的问题中，以便将来回到这里的任何人都可以看到完整的问题和解决方案。我们无法保证您的jsfiddle链接将来会存在。

Answer 2

这是您的问题的解决方案，这是正确的方法来做到这一点.. 下面的代码和一些CSS将做的魔术.. AddClassname将添加适当的类和效果，使您的图形更好，Css将仅在饼图上添加手形光标而不是整个区域。这是小提琴.. https://jsfiddle.net/sahilweb6/wc8ezzn1/3/

附加脚本

"addClassNames": true,

  "innerRadius": "30%",
  "defs": {
    "filter": [{
      "id": "shadow",
      "width": "200%",
      "height": "200%",
      "feOffset": {
        "result": "offOut",
        "in": "SourceAlpha",
        "dx": 0,
        "dy": 0
      },
      "feGaussianBlur": {
        "result": "blurOut",
        "in": "offOut",
        "stdDeviation": 5
      },
      "feBlend": {
        "in": "SourceGraphic",
        "in2": "blurOut",
        "mode": "normal"
      }
    }]
  },

<强> CSS

.amcharts-pie-slice {
  transform: scale(1);
  transform-origin: 50% 50%;
  transition-duration: 0.3s;
  transition: all .3s ease-out;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  cursor: pointer;
  box-shadow: 0 0 30px 0 #000;
}

.amcharts-pie-slice:hover {
  transform: scale(1.1);
  filter: url(#shadow);
}

如何使用amcharts在饼图切片上显示手形光标

2 个答案: