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


How to explode Kendo pie chart wedge when clicked?

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

当然，我可以通过调用 Ajax 来获取图表，传递一个参数来指示被点击的楔形，但这非常低效，并且可能非常缓慢，具体取决于连接和复杂性数据(和/或所需的处理)。

我在其他地方找到了相同问题的答案，但建议的解决方案不适用于 Kendo 图表(设置了 Kendo 不支持的属性)。

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

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

http://www.kendoui.c??om/forums/dataviz/chart/explode-slices-onseriesclick.aspx

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

1
2
3
4
5
6
7
8
9
10
11
12
13
    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/

HTH

相关讨论

这是在 jQuery 的 Kendo UI 中进行"爆炸"的另一种方法：

1
2
3
4
5
6
7
8
9
10
11
12
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 残留物在附近徘徊。您最终可能会得到多个相同事物的图表。