图表问题实现三个甜甜圈相互重叠

Question

有人可以帮助使用 Chart.js 实现以下格式的甜甜圈吗？

非常感谢您的帮助。

谢谢

var data = {
  labels: ["Segment 1", "Segment 2", "Segment 3"],
  datasets: [
    {
      data: [40, 60], // Sizes of Profit segments (40% and 60%)
      backgroundColor: ["lightgreen", "transparent"]
    },
    {
      data: [25, 75], // Sizes of Income segments (25% and 75%)
      backgroundColor: ["lightcoral", "transparent"]
    },
    {
      data: [10, 90], // Sizes of Loss segments (10% and 90%)
  backgroundColor: ["lightblue", "transparent"]
    }
  ]
};

var options = {
  cutoutPercentage: 75, // Adjust this value to control the size of the hole in the doughnut
  circumference: Math.PI, // Set to Math.PI for a semi-circle or adjust according
  rotation: -Math.PI / 2, // Start angle for the doughnut chart
  animation: { animateRotate: true, animateScale: false },
  plugins: { datalabels: { display: false } }
};

// Get the canvas element
var ctx = document.getElementById("multiDoughnutChart").getContext("2d");

// Create the doughnut chart
var myChart = new Chart(ctx, {
  type: "doughnut",
  data: data,
  options: options
});

以上是我的尝试，但没有得到我想要的结果。

Answer 1

多系列圆环图的问题是您必须按照此处的描述自行生成标签。

请查看您修改后的可运行代码，看看它是如何工作的。

new Chart('multiDoughnutChart', {
  type: "doughnut",
  data: {
    labels: ['Profit', 'Income', 'Loss'],
    datasets: [{
        data: [40, 60],
        backgroundColor: ['lightgreen', '#EFEFEF'],
        borderWidth: 10,
        borderRadius: 10        
      },
      {
        data: [25, 75],
        backgroundColor: ['lightcoral', '#EFEFEF'],
        borderWidth: 10,
        borderRadius: 10
      },
      {
        data: [10, 90],
        backgroundColor: ['lightblue', '#EFEFEF'],
        borderWidth: 10,
        borderRadius: 10
      }
    ]
  },
  options: {
    cutout: '30%',
    hover: {
      mode: null
    },
    plugins: {
      legend: {
        labels: {
          generateLabels: chart => chart.data.labels.map((label, i) => ({
            text: label,
            idx: i,
            fillStyle: chart.data.datasets[i].backgroundColor[0],
            strokeStyle: '#fff',
            hidden: !chart.isDatasetVisible(i)
          }))
        },
        onClick: (event, legendItem, legend) => {
          legend.chart.getDatasetMeta(legendItem.idx).hidden = legend.chart.isDatasetVisible(legendItem.idx);
          legend.chart.update();
        }
      },
      tooltip: {
        filter: tooltipItem => tooltipItem.dataIndex == 0,
        callbacks: {
          label: ctx => ctx.raw + '%'
        }
      }
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/chart.js@^4"></script>
<canvas id="multiDoughnutChart" style="max-height: 200px"></canvas>

在数据集上设置

borderWidth

 会在工具提示内产生一个令人讨厌的彩色框。不确定是否有一个简单的解决方案可以解决这个问题。对于这个问题可能值得单独提出一个问题。