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

Question

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

Answer 1

Shift 缩放当前选定的切片不是一项功能，但它已在各种论坛和项目的 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属性来移动元素。小提琴包含完整的代码，还可以处理缩小先前选定的元素。

<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中所示的图例来解决这个问题，这是这个 SO 问题的结果。
• 所选切片将与其余切片保持接触。如果希望它有间隙，则需要根据活动切片的和属性来平移活动切片的x和。y.startAngle.endAngle

Answer 2

我已经使用以下代码修复了这个问题：

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

我希望它能帮助你。