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

问题描述

是否可以在chartjs中扩展甜甜圈图onclick事件或鼠标悬停的范围? 我正在使用chart.js@2.8.0版本.

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

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

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

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

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.

代码:

此部分仅显示缩放活动元素的部分，仅是为您提供有关如何使用活动元素.innerRadius和.outerRadius属性移动元素的想法. 小提琴包含完整的代码，该代码还可以处理缩小先前选择的元素的情况.

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

示例图片:

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

Here is a sample of the highlighted slice:

限制:

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

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

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

• 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屋！