Как показать ручный курсор на срезах круговых диаграмм с использованием amcharts

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 будет делать магию .. 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); 
} 

Answer 2

Добавить это в CSS

#chartdiv { 
    cursor: pointer; 
} 

Это должно дать вам то, что вы хотите, но добавить код в свой вопрос, так что любой, кто вернется сюда в будущем, также может увидеть полный вопрос и решение. Нет никакой гарантии, что ваша jsfiddle-ссылка будет существовать в будущем.