当空或没有甜甜圈环数据时，如何用自定义颜色显示空甜甜圈图？

Question

我在 vue 中使用 vue-chartjs 使用来自 chartjs 的圆环图。

默认情况下，当没有数据或所有值均为空时，圆环图不会显示任何内容。当甜甜圈环中的数据集中没有值或所有值均为 0 时，有没有办法以自定义颜色显示甜甜圈图。

期望的行为：没有数据时具有自定义颜色的圆环图。就像这里的link甜甜圈空状态一样，他们只提供了一个圆圈。相反，想要在空时使用自定义颜色输入的完整甜甜圈。我该怎么做？

实施：

<template>
  <Doughnut
    id="my-chart-id"
    :chartOptions="getChartOptions"
    :chartData="getChartData"
    :plugins="[defaultBackground]"
  />
</template>
<script>
import { Doughnut } from 'vue-chartjs';
import { Chart as ChartJS, ArcElement } from 'chart.js';

ChartJS.register(ArcElement);

export default {
  name: 'DoughnutChart',
  components: { Doughnut },
  props: ['chartData', 'options', 'theme', 'mspDomain', 'rootDomain'],
  data() {
    return {
      defaultBackground: {
        id: 'custom_canvas_background_color',
        afterDraw: function(chart) {
          const {datasets} = chart.data;
          const {color, width, radiusDecrease} = options;
          let hasData = false;

          for (let i = 0; i < datasets.length; i += 1) {
            const dataset = datasets[i];
            hasData |= dataset.data.length > 0;
           }

           if (!hasData) {
              const {chartArea: {left, top, right, bottom}, ctx} = chart;
              const centerX = (left + right) / 2;
              const centerY = (top + bottom) / 2;
              const r = Math.min(right - left, bottom - top) / 2;

              ctx.beginPath();
              ctx.lineWidth = width || 2;
              ctx.strokeStyle = color || 'rgba(255, 128, 0, 0.5)';
              ctx.arc(centerX, centerY, (r - radiusDecrease || 0), 0, 2 * Math.PI);
              ctx.stroke();
           }
        }
      }
    };
  },
  computed: {
    getChartData() {
      return this.chartData;
    },
    getChartOptions() {
      return this.options;
    }
  }
};
</script>

<style></style>

这里它只是画一个圆圈而不是整个甜甜圈。

Answer 1

我在 afterDraw 插件中创建了圆环图，并按照我想要的方式进行了所有计算和半径。我修改了chartjs中给出的reference的代码以获取空数据。

在这里您可以根据您的要求更改半径、颜色。

<template>
  <Doughnut
    id="my-chart-id"
    :chartOptions="getChartOptions"
    :chartData="getChartData"
    :plugins="[defaultBackground]"
  />
</template>
<script>
import { Doughnut } from 'vue-chartjs';
import { Chart as ChartJS, ArcElement } from 'chart.js';

ChartJS.register(ArcElement);

export default {
  name: 'DoughnutChart',
  components: { Doughnut },
  props: ['chartData', 'options'],
  data() {
    return {
      defaultBackground: {
        id: 'custom_canvas_background_color',
        afterDraw: function(chart) {
          let totalData = chart.config.data.datasets[0].data.reduce(function(
            a,
            b
          ) {
            return a + b;
          },
          0);
          if (totalData === 0) {
            const {
              chartArea: { left, top, right, bottom },
              ctx
            } = chart;
            ctx.save(); // Save the current canvas state

            // Calculate the center of the chart
            const centerX = (left + right) / 2;
            const centerY = (top + bottom) / 2;

            // Calculate the radii of the inner and outer circles of the doughnut
            const outerRadius = Math.min(right - left, bottom - top) / 2;
            const innerRadius = outerRadius - 45; // Adjust this value as needed

            // Calculate the positions for the starting and ending points of the line
            const lineStartX = centerX;
            const lineStartY = centerY - outerRadius;
            const lineEndX = centerX;
            const lineEndY = centerY - innerRadius;

            // Draw the outer arc (grey doughnut ring)
            ctx.beginPath();
            ctx.arc(centerX, centerY, outerRadius, 0, 2 * Math.PI);
            ctx.fillStyle = 'rgba(216, 216, 216, 1)';
            ctx.fill();

            // Draw the inner arc (to clear the inner circle)
            ctx.beginPath();
            ctx.arc(centerX, centerY, innerRadius, 0, 2 * Math.PI);
            ctx.fillStyle = 'rgba(255, 255, 255, 1)'; // Fill with white to clear the inner circle
            ctx.fill();

            // Draw the white line break from outer circle to inner circle
            ctx.beginPath();
            ctx.moveTo(lineStartX, lineStartY);
            ctx.lineTo(lineEndX, lineEndY);
            ctx.lineWidth = 2; // Adjust the line width as needed
            ctx.strokeStyle = 'rgba(255, 255, 255, 1)'; // White color
            ctx.stroke();

            ctx.restore(); // Restore the canvas state
          }
        }
      }
    };
  },
  computed: {
    getChartData() {
      return this.chartData;
    },
    getChartOptions() {
      return this.options;
    }
  }
};
</script>

<style></style>