如何在chartjs中扩展圆环图的切片？

Question

有没有办法在chartjs中展开圆环图onclick事件或鼠标悬停的切片？ 我使用的是chart.js@2.8.0版本。

Answer 1

我已经使用以下代码解决了这个问题：

   let segment;
   this.chart = new Chart(this.canvas, {
    type: this.type,
    data: this.data,
    options: {
      ...this.options,
      onHover: function (evt, elements) {
        if (elements && elements.length) {
          segment = elements[0];
          this.chart.update();
          selectedIndex = segment["_index"];
          segment._model.outerRadius += 10;
        } else {
          if (segment) {
            segment._model.outerRadius -= 10;
          }
          segment = null;
        }
      },
      layout: {
        padding: 30
      }
    }
  });

希望对你有帮助。

Answer 2

Shift-zooming 当前选定的切片不是一项功能，但已在各种论坛和项目的 GitHub 社区上多次讨论：

• https://forum.mendixcloud.com/link/questions/85582
• https://github.com/chartjs/Chart.js/issues/1451

Github 讨论包含有人为使用 Chart.js 1.0 的饼图编写的小提琴。这是支持圆环图的当前 Chart.js 版本的更新版本。

代码：

这部分只展示了缩放活动元素的部分，只是为了让你了解如何使用活动元素.innerRadius和.outerRadius属性来移动元素。 fiddle 包含完整的代码，它还处理缩小先前选择的元素。

<div style="width:400px;">
  <canvas id="myChart" width="200" height="200"></canvas>
</div>

var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
  type: 'doughnut',
  options: {
    layout: {
      padding: 30
    }
  },
  data: {
    labels: ['Red', 'Blue', 'Yellow'],
    datasets: [
      {
        label: '# of Votes',
        data: [4, 5, 3],
        backgroundColor: [
          'rgba(255, 0, 0, 1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)'
        ],
        borderWidth: 3
      }]
  }
});

var addRadiusMargin = 10;

$('#myChart').on('click', function(event) {
  var activePoints = myChart.getElementsAtEvent(event);

  if (activePoints.length > 0) {
    // update the newly selected piece
    activePoints[0]['_model'].innerRadius = activePoints[0]['_model'].innerRadius +
        addRadiusMargin;
    activePoints[0]['_model'].outerRadius = activePoints[0]['_model'].outerRadius +
        addRadiusMargin;
  }

  myChart.render(300, false);
}

示例图片：

这是突出显示的切片的示例：

限制：

我没有包含的示例有两个限制：

• Chart.js 不允许在图例和图表内容之间定义边距，因此当您“缩放”/“移动”时，缩放后的切片可能会与图例的某些部分重叠。您可以通过扩展 Jordan Willis' Codepen 中所示的图例来解决此问题，这是 this SO question 的结果。
• 所选切片将与其余切片保持联系。如果希望它有间隙，则需要根据活动切片的.startAngle 和.endAngleproperties 翻译活动切片的x 和y。