Wie kann ich eine Teilmenge der Daten von Kreisstücken in Chart.JS anzeigen, während die Obermenge beim Schweben weiterhin angezeigt wird?

Ich habe ein Kreisdiagramm, das so aussieht, wenn ich mit der Maus über ein Stück Kuchen schwebe:

Außer für die Legende wollen rechts statt oben, Ich bin ziemlich zufrieden damit, aber ich möchte, dass nur der Prozentwert "die ganze Zeit" in den Kuchenstücken angezeigt wird - und trotzdem das<name> (<%val>): <data> wird beim Hover angezeigt.

it anderen Worten, ich möchte, dass der Kuchen ungefähr so aussieht:

Wie kann ich dieses eine Datenstück (den Prozentsatz) aufteilen und auf jedes Stück Kuchen zeichnen?

Hier ist der Code, den ich bisher benutze:

var formatter = new Intl.NumberFormat("en-US");
var data = {
    labels: [
        "Bananas (18%)",
        "Lettuce, Romaine (14%)",
        "Melons, Watermelon (10%)",
        "Pineapple (10%)",
        "Berries (10%)",
        "Lettuce, Spring Mix (9%)",
        "Broccoli (8%)",
        "Melons, Honeydew (7%)",
        "Grapes (7%)",
        "Melons, Cantaloupe (7%)"
    ],
    datasets: [
        {
            data: [2755, 2256, 1637, 1608, 1603, 1433, 1207, 1076, 1056, 1048],
            backgroundColor: [
                "#FFE135",
                "#3B5323",
                "#fc6c85",
                "#ffec89",
                "#021c3d",
                "#3B5323",
                "#046b00",
                "#cef45a",
                "#421C52",
                "#FEA620"
            ]
        }
    ]
};

var optionsPie = {
    responsive: true,
    scaleBeginAtZero: true,
    tooltips: {
        callbacks: {
            label: function (tooltipItem, data) {
                return data.labels[tooltipItem.index] + ": " +
                    formatter.format(data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]);
            }
        }
    }
};

var ctx = $("#top10ItemsChart").get(0).getContext("2d");
var top10PieChart = new Chart(ctx,
{
    type: 'pie',
    data: data,
    options: optionsPie
});

$("#top10Legend").html(top10PieChart.generateLegend());

Muss ich ein afterDraw () -Ereignis hinzufügen und wenn ja, wie muss es aussehen, um dies zu erreichen?

var top10PieChart = new Chart(ctx,
{
    type: 'pie',
    data: data,
    options: optionsPie,
    onAnimationComplete: function () {
        var ctx = this.chart.ctx;
        ctx.font = this.scale.font;
        ctx.fillStyle = this.scale.textColor;
        ctx.textAlign = "center";
        ctx.textBaseline = "center";

        this.datasets.forEach(function(dataset) {
            dataset.points.forEach(function(points) {
                ctx.fillText(points.value, points.x, points.y - 10);
            });
        });
    }
});

,
tooltipTemplate: "<%= value %>",
onAnimationComplete: function () {
    this.showTooltip(this.datasets[0].bars, true);
}

Okay, ich war zuversichtlich, dass die AntwortHie würde funktionieren und endete mit diesem neuen Code für mein Tortendiagramm basierend auf der Antwort dort:

Zu optionsPie hinzugefügt:

showTooltips: false,
onAnimationProgress: drawSegmentValues

Wird hinzugefügt, nachdem der Verweis auf das Element abgerufen wurde:

var midX = canvas.width / 2;
var midY = canvas.height / 2

Wurde hinzugefügt, nachdem die Kreisdiagramminstanz erstellt wurde:

var radius = top10PieChart.outerRadius;

Added Funktion drawSegmentValues ()

Im Kontext (kein Wortspiel beabsichtigt):

        // Top 10 Pie Chart
        var formatter = new Intl.NumberFormat("en-US");
        var data = {
            labels: [
                "Bananas (18%)",
                "Lettuce, Romaine (14%)",
                "Melons, Watermelon (10%)",
                "Pineapple (10%)",
                "Berries (10%)",
                "Lettuce, Spring Mix (9%)",
                "Broccoli (8%)",
                "Melons, Honeydew (7%)",
                "Grapes (7%)",
                "Melons, Cantaloupe (7%)"
            ],
            datasets: [
                {
                    data: [2755, 2256, 1637, 1608, 1603, 1433, 1207, 1076
1056, 1048],
                    backgroundColor: [
                        "#FFE135",
                        "#3B5323",
                        "#fc6c85",
                        "#ffec89",
                        "#021c3d",
                        "#3B5323",
                        "#046b00",
                        "#cef45a",
                        "#421C52",
                        "#FEA620"
                    ]
                }
            ]
        };

        var optionsPie = {
            responsive: true,
            scaleBeginAtZero: true,
            legend: {
                display: false
            },
            tooltips: {
                callbacks: {
                    label: function (tooltipItem, data) {
                        return data.labels[tooltipItem.index] + ": " +
                         formatter.format
data.datasets[tooltipItem.datasetIndex].data[
tooltipItem.index]);
                    }
                }
            },
            showTooltips: false,
            onAnimationProgress: drawSegmentValues
        };

        var ctx = $("#top10ItemsChart").get(0).getContext("2d");
        var midX = canvas.width / 2;
        var midY = canvas.height / 2
     ,   var top10PieChart = new Chart(ctx,
        {
            type: 'pie',
            data: data,
            options: optionsPie//,
        });
        var radius = top10PieChart.outerRadius;

        $("#top10Legend").html(top10PieChart.generateLegend());
        // </ Top 10 Pie Chart

        // Price Compliance Bar Chart
        . . . this horizontal bar chart code elided for brevity, bu
unchanged from their working state
        // Forecast/Impact Analysis Bar chart
        . . . this horizontal bar chart code also elided for brevity, bu
unchanged from their working state

    function drawSegmentValues() {
        for (var i = 0; i < top10PieChart.segments.length; i++) {
            ctx.fillStyle = "white";
            var textSize = canvas.width / 10;
            ctx.font = textSize + "px Verdana";
            // Get needed variables
            var value = top10PieChart.segments[i].value;
            var startAngle = top10PieChart.segments[i].startAngle;
            var endAngle = top10PieChart.segments[i].endAngle;
            var middleAngle = startAngle + ((endAngle - startAngle)
2);

            // Compute text location
            var posX = (radius / 2) * Math.cos(middleAngle) + midX;
            var posY = (radius / 2) * Math.sin(middleAngle) + midY;

            // Text offside by middle
            var w_offset = ctx.measureText(value).width / 2;
            var h_offset = textSize / 4;

            ctx.fillText(value, posX - w_offset, posY + h_offset);
        }
    }

... aber es hat alle drei Diagramme komplett ausgelaugt und nichts sichtbar / zeichnend hinterlassen.

Übrigens habe ich die gegebene Antwort ausprobiert, aber ohne Ergebnis / Änderung - es werden weiterhin Daten zum Schwebeflug angezeigt, wie geplant, aber es gibt nichts anderes.

Auch die zugehörige Geige zeigt sowohl den Wert als auch den Prozentsatz an; aus immobiliengründen möchte ich, dass der prozentuale anteil nur "immer an" ist - die "ganze enchilada" ist nur beim schweben zu sehen.