4

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

当然，我可以通过调用 Ajax 来获取图表，传递一个参数来指示被点击的楔形，但是这非常低效，并且可能慢得令人讨厌，具体取决于数据的连接和复杂性（和或所需的嘎吱声）。

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

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

4

2 回答 2

7

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

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

它的要点是您需要更新数据中的“explode”字段，然后单击它后重新绘制图表。这可以通过“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/

高温高压

于 2013-01-24T16:37:39.190 回答
0

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

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();
},

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

于 2020-07-21T12:41:37.350 回答