Question

我想删除切片拉入并拉出鼠标单击Animated Amcharts Timeline Pie-chart

以下是代码：

function pushvalue(curyear,curmonth,monvalue,state,statecount){
 array.push({year: curyear, month: curmonth, count: monvalue, state: state, 
 statecount: statecount});
}

var monthNames = ["January", "February","March", "April", "May", "June","July", "August", "September", "October", "November", "December”];
var currentYear = 1997;
var array = [];

for (var i = 0; i < 4; ++i) {
for (var j = 0; j < 12; ++j) {
 pushvalue(currentYear + i, monthNames[j],count[j],state[j],statecount[j]);
}
}

var chartData = {};
for (var i = 0; i < array.length; ++i) {
 if (!chartData[array[i].year]) {
   chartData[array[i].year] = [];
 }
 chartData[array[i].year].push({"Month": array[i].month, "Count": array[i].count, “State”: array[i].state, “StateCount”: array[i].statecount });
}

var currentYear = 1997;
var chart = AmCharts.makeChart( "chartdiv", {
  "type": "pie",
  "theme": "light",
  "dataProvider": [],
  "valueField": "Count",
  “valueField1”: “State”,
  “valueField2”: “StateCount”,
  "titleField": "Month",
  "startDuration": 0,
  "innerRadius": 80,
  "pullOutRadius": 20,
  "marginTop": 30,
"balloonText": "Completed [[State]] for [[StateCount]] states in [[title]] month",
“labelText”: “[[title]] - [[value]]”,
  "titles": [{
    "text": "Test chart"
  }],
  "allLabels": [{
    "y": "54%",
    "align": "center",
    "size": 25,
    "bold": true,
    "text": "1995",
    "color": "#555"
  }, {
    "y": "49%",
    "align": "center",
    "size": 15,
    "text": "Year",
    "color": "#555"
  }],
  "listeners": [ {
    "event": "init",
    "method": function( e ) {
      var chart = e.chart;

  function getCurrentData() {
    var data = chartData[currentYear];
    currentYear++;
    if (currentYear > 2000)
      currentYear = 1997;
    return data;
  }

  function loop() {
    chart.allLabels[0].text = currentYear;
    var data = getCurrentData();
    chart.animateData( data, {
      duration: 1000,
      complete: function() {
        setTimeout( loop, 3000 );
      }
    } );
  }

  loop();
}
  } ],
    } );

我遇到的答案只有amCharts pie - how to get slice to pull out on rollOverSlice?

但是在那个答案中，Rolloverslice刚刚添加到Amcharts中预定义的实际clickonslice事件中。无论如何要删除预定义的clickonslice pulloutslice并将其添加到鼠标悬停在事件上？因为我们计划为Clickonslice添加一些其他事件。

谢谢！

Answer 1

在点击时禁用切片拉出的唯一方法是将pullOutRadius设置为0.这样可以防止即使通过调用clickSlice也可能发生自然拉出，因此您必须利用您链接的SO线程中描述的CSS转换方法，允许在悬停时拔出（您需要首先将addClassNames设置为true）并设置defs属性以添加某种类型悬停时的拉出式交互性（请参阅AmCharts＆＃39; SVG filters文档，了解如何自定义defs）。相关代码如下：

 /* 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);
}

// ... in makeChart
  "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"
      }
    }]
  },

Demo

如何删除PullInSlice / PullOutSlice onclick并在鼠标悬停时添加PullInSlice / PullOutSlice悬停在动画Amcharts时间轴饼图中

1 个答案: