如何在chartjs中扩展圆环图的切片? [英] How to expand the slice of donut chart in chartjs?

问题描述

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

解决方案

Shift-zooming 当前选择的切片不是一个功能，但在各个论坛和项目的 GitHub 社区上已经讨论过多次:

• 中所示的图例来解决这个问题，这是这个问题.
• 所选切片将与其余切片保持联系.如果希望它有间隙，则需要根据 .startAngle 和 翻译活动切片的 x 和 y.endAngle活动切片的属性.

Is there any way to expand the slice of donut chart onclick event or mouse hover in chartjs ?. I am using chart.js@2.8.0 version.

解决方案

Shift-zooming the currently selected slice is not a feature but it has been discussed several times on various forums and the project's GitHub community:

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

The Github discussion contains a fiddle someone wrote for a Pie chart with Chart.js 1.0. Here is an updated version for the current Chart.js version that supports Donut charts.

Code:

This part only shows the part that zooms the active element, it is just to give you the idea of how to use the active elements .innerRadius and .outerRadius properties to shift the element. The fiddle contains the complete code that also handles shrinking the previously selected element.

<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 image:

Here is a sample of the highlighted slice:

Limitations:

There are two limitations of the sample that I haven't included:

• Chart.js does not allow to define a margin between legend and chart content so when you are "zooming"/"moving", the zoomed slice might overlap parts of the legend. You may solve this by extending the legend as shown in Jordan Willis' Codepen which was the result of this SO question.
• The selected slice will stay in contact with the remaining slices. If you want it to have a gap, you need to translate x and y of the active slice based on the .startAngle and .endAngleproperties of the active slice.

这篇关于如何在chartjs中扩展圆环图的切片?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！