甜甜圈图的 Chartjs 自定义图例具有从每个部分伸出的标记线

Question

我知道如何在 Chartjs 中为数据集绘制圆环图及其图例自定义，但我想要一个如下图所示的图表，其中每个部分的线条都在上方和下方突出显示文本线。我在 Chartjs 中找不到这种级别的自定义。有谁知道该怎么做？任何帮助将非常感激。谢谢

Answer 1

我找到了一个解决方案，方法是使用多个画布并使用 JavaScript 的 2d 上下文在其上方和下方绘制突出的线条和文本。我通过给出负边距使线条触及 chartjs 的甜甜圈图。响应能力仍然是一个问题，但至少这是一种解决方法。我在这里发布代码。屏幕尺寸可能会使线条错位。您可能想在笔记本电脑上全屏查看结果。

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            
            .chart-wrapper
            {
                width: 24rem;
                height: 24rem;
            }
            .debt-savings
            {
                margin-right: -15rem;
            }
            .needs
            {
                margin-left: -5.5rem;
            }
            .wants
            {
                margin-top: -6.8rem;
            }
        </style>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    </head>
    <body>
        <div class="row">
            <br><br><br><br><br><br><br><br>
        </div>
        <div class="row d-flex justify-content-center">
            <div class="col-4 chart-wrapper debt-savings">
                <canvas id="debt-savings"></canvas>
            </div>
            <div class="col-4 d-flex justify-content-center">
                <div class="chart-wrapper">
                    <canvas    id="budget-chart"></canvas>
                </div>
                
            </div>
            <div class="col-4 chart-wrapper needs">
                <canvas id="needs"></canvas>
            </div>
            
        </div>
        <div  class="row d-flex justify-content-end">
            <div class="col-6 chart-wrapper wants">
                <canvas id="wants"></canvas>
            </div>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script type="text/javascript">
       
            // Data for doughnut chart
        const data = {
            labels: [
              'Debt & Saving',
              'Needs',
              'Wants'
            ],
            datasets: [{
              label: 'My First Dataset',
              data: [20//debtAndSavingsPercet
                  , 30//needsPercet
                  , 50//wantsPercet
              ],
              backgroundColor: [
                'rgb(255, 99, 132)',
                'rgb(54, 162, 235)',
                'rgb(255, 205, 86)'
              ],
              hoverOffset: 4
            }]
          };
        var ctx = document.getElementById("budget-chart").getContext("2d");
        var myDoughnutChart = new Chart(ctx, {
            type: 'doughnut',
            data: data,
            options: {
                legend:{
                    display:false,
                },
                responsive:true,
                maintainAspectRatio:true,
            }
        });
        var debtAndSavingCanvas = document.getElementById("debt-savings");
        debtAndSavingCanvas.width  = 300;
        debtAndSavingCanvas.height = 300;
        var debtAndSavingCtx = debtAndSavingCanvas.getContext("2d");        
        debtAndSavingCtx.font = "normal normal 500 40px Georgia";
        debtAndSavingCtx.fillStyle = "green";
        debtAndSavingCtx.fillText("20%", 0, 100);
        debtAndSavingCtx.font = "16px Georgia";
        debtAndSavingCtx.fillText("Debt &", 100, 70);
        debtAndSavingCtx.fillText("savings", 100, 100);
        debtAndSavingCtx.font = "20px Georgia";
        debtAndSavingCtx.fillStyle = "grey";
        debtAndSavingCtx.fillText("Emergency savings,", 0, 134);
        debtAndSavingCtx.fillText("student loans, credit", 0, 154);
        debtAndSavingCtx.fillText("cards, etc.", 0, 174);
        debtAndSavingCtx.beginPath();
        debtAndSavingCtx.moveTo(300, 150);
        debtAndSavingCtx.lineTo(230, 110);
        debtAndSavingCtx.lineTo(0, 110);
        debtAndSavingCtx.stroke();
        //
        // Needs context 
        //
         var needsCanvas = document.getElementById("needs");
        needsCanvas.width  = 300;
        needsCanvas.height = 300;
        var needsCtx = needsCanvas.getContext("2d");        
        needsCtx.font = "normal normal 500 40px Georgia";
        needsCtx.fillStyle = "purple";
        needsCtx.fillText("53%", 30, 95);
        needsCtx.font = "20px Georgia";
        needsCtx.fillText("needs", 110, 95);
        needsCtx.font = "20px Georgia";
        needsCtx.fillStyle = "grey";
        needsCtx.fillText("Mortgage/rent, utilities,", 50, 134);
        needsCtx.fillText("phone/internet, etc", 50, 154);
        //draw the line
        needsCtx.beginPath();
        needsCtx.moveTo(0, 130);
        needsCtx.lineTo(30, 110);
        needsCtx.lineTo(200, 110);
        needsCtx.stroke();
        
        //
        // Wants context 
        //
         var wantsCanvas = document.getElementById("wants");
        wantsCanvas.width  = 300;
        wantsCanvas.height = 300;
        var wantsCanvas = wantsCanvas.getContext("2d");        
        wantsCanvas.font = "normal normal 500 40px Georgia";
        wantsCanvas.fillStyle = "purple";
        wantsCanvas.fillText("25%", 50, 95);
        wantsCanvas.font = "20px Georgia";
        wantsCanvas.fillText("wants", 130, 95);
        wantsCanvas.font = "20px Georgia";
        wantsCanvas.fillStyle = "grey";
        wantsCanvas.fillText("Mortgage/rent, utilities,", 50, 134);
        wantsCanvas.fillText("phone/internet, etc", 50, 154);
        //draw the line
        wantsCanvas.beginPath();
        wantsCanvas.moveTo(0, 80);
        wantsCanvas.lineTo(30, 110);
        wantsCanvas.lineTo(200, 110);
        wantsCanvas.stroke();
    </script>
    </body>
</html>

甜甜圈图的 Chartjs 自定义图例具有从每个部分伸出的标记线

Chartjs Custom Legend for Doughnut Chart Having Labelled Lines Sticking Out of Each Section

javascript

customization

legend

pie-chart

chart.js