如何在餅圖中用離子線在外部顯示數據標簽

Question

我正在處理圖表，我想在其中創建與下面顯示的圖像相同的餅圖。 我得到了一些使用 chart.js 的例子，但它不能作為我想在圖表外顯示數據標簽的圖像，線條指示數據標簽的部分。

家.ts

this.doughnutChart = new Chart(this.doughnutCanvas.nativeElement, {

                 type: 'doughnut',
                 data: {
                     labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
                     datasets: [{
                         label: '# of Votes',
                         data: [12, 19, 3, 5, 2, 3],
                         backgroundColor: [
                             'rgba(255, 99, 132, 0.2)',
                             'rgba(54, 162, 235, 0.2)',
                             'rgba(255, 206, 86, 0.2)',
                             'rgba(75, 192, 192, 0.2)',
                             'rgba(153, 102, 255, 0.2)',
                             'rgba(255, 159, 64, 0.2)'
                         ],
                         hoverBackgroundColor: [
                             "#FF6384",
                             "#36A2EB",
                             "#FFCE56",
                             "#FF6384",
                             "#36A2EB",
                             "#FFCE56"
                         ]
                     }]
                 }

             });

主頁.html

<ion-card>
    <ion-card-header>
      Doughnut Chart
    </ion-card-header>
    <ion-card-content>
      <canvas #doughnutCanvas></canvas>
    </ion-card-content>
  </ion-card>

我希望它看起來像什么

使用 chart.js 是什么樣的

所以有人可以幫我解決這個問題嗎？

Answer 1

你必須寫一個插件來做到這一點。 在afterDraw鈎子中，您必須遍歷圖表元素並計算 3 個點：

Point1：當前圓弧的中心點
Point2：通過連接圖表的中心和Point1 ，長度 = 半徑 + X（x > 0 將提供更好的視覺效果）
Point3：通過將Point2與基於Point2.x圖表邊緣（左/右）連接起來創建

畫 2 條線將 Point1 與 Point2 連接起來，Point2 與 Point3 將為您提供以下圖表：

https://imgur.com/a/rWaV2x3

chartjs 2.9.4 的示例代碼：

const DoughnutLabelPlugin = {
    afterDraw: (chart) => {
      const ctx = chart.chart.ctx;
      ctx.save();
      ctx.font = "10px 'Averta Std CY'";
      const chartCenterPoint = {
        x:
          (chart.chartArea.right - chart.chartArea.left) / 2 +
          chart.chartArea.left,
        y:
          (chart.chartArea.bottom - chart.chartArea.top) / 2 +
          chart.chartArea.top
      };
      chart.config.data.labels.forEach((label, i) => {
        const meta = chart.getDatasetMeta(0);
        const arc = meta.data[i];
        const dataset = chart.config.data.datasets[0];

        // Prepare data to draw
        // important point 1
        const centerPoint = arc.getCenterPoint();
        const model = arc._model;
        let color = model.borderColor;
        let labelColor = model.borderColor;
        if (dataset.polyline && dataset.polyline.color) {
          color = dataset.polyline.color;
        }

        if (dataset.polyline && dataset.polyline.labelColor) {
          labelColor = dataset.polyline.labelColor;
        }

        const angle = Math.atan2(
          centerPoint.y - chartCenterPoint.y,
          centerPoint.x - chartCenterPoint.x
        );
        // important point 2
        const point2X =
          chartCenterPoint.x + Math.cos(angle) * (model.outerRadius + 20);
        let point2Y =
          chartCenterPoint.y + Math.sin(angle) * (model.outerRadius + 20);

        let value = dataset.data[i];
        if (dataset.polyline && dataset.polyline.formatter) {
          value = dataset.polyline.formatter(value);
        }
        let edgePointX = point2X < chartCenterPoint.x ? 10 : chart.width - 10;

        //DRAW CODE
        // first line: connect between arc's center point and outside point
        ctx.strokeStyle = color;
        ctx.beginPath();
        ctx.moveTo(centerPoint.x, centerPoint.y);
        ctx.lineTo(point2X, point2Y);
        ctx.stroke();
        // second line: connect between outside point and chart's edge
        ctx.beginPath();
        ctx.moveTo(point2X, point2Y);
        ctx.lineTo(edgePointX, point2Y);
        ctx.stroke();
        //fill custom label
        const labelAlignStyle =
          edgePointX < chartCenterPoint.x ? "left" : "right";
        const labelX = edgePointX;
        const labelY = point2Y;
        ctx.textAlign = labelAlignStyle;
        ctx.textBaseline = "bottom";

        ctx.fillStyle = labelColor;
        ctx.fillText(value, labelX, labelY);
      });
      ctx.restore();
    }
  }