如何使用amcharts在饼图切片上显示手形光标 [英] How to show hand cursor on pie charts slices using amcharts

问题描述

我们如何使饼图切片成为超链接，或者如何在切片上至少显示手形光标.

How can we make the pie charts slice as a hyperlink or how to show at least hand cursor on slices.

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

check the code below. which i am using creating a pie chart using 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();
            }
          }]


        })

      };

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

Is there a way to show hand cursor on pie chart slice

推荐答案

这是您解决问题的方法，这是正确的方法.. 下面的代码和一些css将起到神奇的作用. AddClassname将添加适当的类和效果，这些类和效果可以使您的图形变得更好，而Css将仅在饼图上而不是在整个区域上添加手形光标.这是小提琴.. https://jsfiddle.net/sahilweb6/wc8ezzn1/3/

Here is the solution of your problem and this is the correct way to do this .. Below code and some css will do the magic.. AddClassname will add the appropriate class and effects that can make your graph a lot better and Css will add hand cursor only on the pie slice not on the overall area . Here is the fiddle.. 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在饼图切片上显示手形光标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！