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-zoom缩放当前选择的切片不是一项功能，但已在各种论坛和该项目的GitHub社区上多次讨论过：

Github讨论包含有人用Chart.js 1.0为饼图编写的小提琴。这是支持Donut图表的当前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);
}

示例图片：

以下是突出显示的切片的示例：

sample

限制：

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

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

如何在chartjs中扩展甜甜圈图的切片？

2 个答案: