单击时如何爆炸剑道饼图楔形

Question

我知道如何最初分解饼图楔形（只需将相关数据项的分解设置为 true），但我想做的是在 JavaScript 中单击时让楔形爆炸（绑定到 seriesClick 事件的函数）。当然，我希望重置任何其他爆炸的楔子，以便一次只有一个爆炸的楔子。

当然，我可以通过进行 Ajax 调用来获取图表来实现这一点，传递一个参数来指示单击的楔形，但这效率低下，而且速度可能非常慢，具体取决于数据的连接和复杂性（以及/或所需的处理）。

我在其他地方找到了相同问题的一个答案，但建议的解决方案不适用于剑道图（设置的属性在剑道中不受支持）。

如果有人在这方面有任何经验，我将不胜感激你对我的任何建议。

Answer 1

我在剑道论坛上发现了这篇文章，它要求同样的事情，看起来回复中可能有解决方案：

http://www.kendoui.com/forums/dataviz/chart/explode-slices-onseriesclick.aspx

它的要点是您需要更新数据中的"分解"字段，然后在单击图表后重新绘制图表。这可以通过"seriesClick"事件来完成：

    seriesClick: function(e){
        $( e.sender.dataSource.options.data ).each( function ( i, item ) {
              if ( item.source != e.category )
              {
                  item.explode = false;
              }
              else
              {
                  item.explode = true;
              }
        } );
        createChart();        
    }

我基于这个整理了一个工作的JSFiddle：http://jsfiddle.net/derickbailey/FXs6b/

呵

呵

Answer 2

以下是在

Kendo UI 中为 jQuery 执行"爆炸"的另一种方法：

seriesClick: function (e) {
  for (let i = 0; i < e.series.data.length; i++) {
    if (e.category === e.series.data[i].category) {
      e.series.data[i].explode = true;
    } else {
      e.series.data[i].explode = false;
    }
  }
  e.sender.setOptions(e.sender.options);
  e.sender.redraw();
},

无需重新创建图表。只需重置options并redraw.但是，如果要重新创建图表，请确保正确destroy图表。否则，会有HTML残留物徘徊。您最终可能会得到同一事物的多个图表。