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

Question

有没有办法在chartjs中展开圆环图onclick事件或鼠标悬停的切片？ 我正在使用 [电子邮件受保护] 版本。

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-缩放当前选定的切片不是一项功能，但它已在各种论坛和项目的 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所示，这是这个SO问题的结果。
• 所选切片将与其余切片保持接触。如果希望它有间隙，则需要根据活动切片的

  x

  和

  y

  属性平移活动切片的

  .startAngle

  和

  .endAngle

  。

Answer 3

另一个简单的技巧：

hoverBorderWidth

var ctx = document.getElementById("chart").getContext('2d');
var chart = new Chart(ctx, {
    type: 'pie',
    data: {
        labels: ["Microsoft Internet Explorer", "Google Chrome", "Mozilla Firefox", "Opera", "Safari"],
        datasets: [{
            label: 'Number of votes',
            data: [60, 20, 10, 8, 5],
            backgroundColor: ['#96ceff', '#424348', '#91ee7c', '#f7a35b', '#8286e9'],
            borderColor: '#fff',
            borderWidth: 1,
            hoverBorderColor: ['#96ceff', '#424348', '#91ee7c', '#f7a35b', '#8286e9'],
            hoverBorderWidth: 8
        }]
    },
    options: {
        responsive: false,
        legend: {
            display: false
        },
        tooltips: {
            displayColors: false
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="chart" width="350" height="350"></canvas>

Answer 4

这对于您可以控制的这些方面很有帮助。
间距：10， cutout: 110, // 如果需要，调整剪切值以获得更多空间 偏移量: [150, 0, 0, 0, 0]

import React, { useEffect, useRef } from 'react';
import Chart from 'chart.js/auto';

const DoughnutChart = () => {
  const chartRef = useRef(null);

  useEffect(() => {
    const ctx = chartRef.current.getContext('2d');
    const myChart = new Chart(ctx, {
      type: 'doughnut',
      data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple'],
        datasets: [{
          label: 'My Dataset',
          data: [100, 100, 100, 100, 100],
          backgroundColor: [
            '#73BBC3',
            '#73BBC3',
            '#73BBC3',
            '#73BBC3',
            '#73BBC3'
          ],
          spacing: 10,
          cutout: 110, // Adjust cutout value for more space if needed
          offset: [150, 0, 0, 0, 0]
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: {
            position: 'top',
            display: false
          },
          
          title: {
            display: false,
            text: 'Customizable Donut Chart'
          },
         
        },
        animation: {
          duration: 2,
          easing: 'easeInOutQuad'
        },
        onClick: (event, elements) => {
          if (elements.length > 0) {
            const index = elements[0].index;
            const dataset = myChart.data.datasets[0];

            // Update clicked slice color and offset
            dataset.backgroundColor[index] = '#1D666D';
            dataset.offset.fill(0);
            dataset.offset[index] = 150;

            for (let i = 0; i < dataset.backgroundColor.length; i++) {
              if (i !== index) {
                dataset.backgroundColor[i] = '#73BBC3';
              }
            }

            myChart.update();
          }
        }
      }
    });

    // Draw text on the slices


    // Cleanup function (optional for performance)
    return () => {
      myChart.destroy();
    };
  }, []);

  return (
    <div>
      <canvas ref={chartRef} width="500" height="500" />
    </div>
  );
};

export default DoughnutChart;

这是我的输出 [在此输入图像描述][1] [[1]：https://i.sstatic.net/TMHliA4J.png][1]