html 每个数据值具有不同粗细的ChartJS圆环图数据集

我一直在使用ChartJS与PrimeNG，在Angular 。需要做一个圆环图，我相信一个数据集。我需要使它每个值有不同的厚度，像这样

到目前为止，我已经尝试了很多方法，并阅读了很多关于圆环图的ChartJS文档，但没有一个选项对我有帮助。
下面是如何在HTML中实现图表

<p-chart type="doughnut" [data]="donutData" [options]="donutChartOptions" class="h-10 my-4"></p-chart>

下面是.ts

this.donutData = {
    labels: ['A', 'B', 'C'],
    datasets: [
        {
            data: [300, 50, 100],
            backgroundColor: ['#F36F56', '#FFC300', '#B8A3FF'],
            hoverBackgroundColor: ['#F36F56', '#FFC300', '#B8A3FF'],
        },
    ],
};

this.donutChartOptions = {
    cutout: 50,
    plugins: {
        legend: {
            display: false,
            labels: {
                color: '#ebedef',
            },
        },
    },
};

Here you can find the answer of your question: https://github.com/chartjs/Chart.js/issues/6195

I transferred the answer of "ex47" to chart.js 3 I put the constant "data" into the html file just to have less double code, it should better be in the javascript file.

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
    <script>
        const 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)"
                    ],
                    borderColor: [
                        "rgba(255, 99, 132, 1)",
                        "rgba(54, 162, 235, 1)",
                        "rgba(255, 206, 86, 1)",
                        "rgba(75, 192, 192, 1)",
                        "rgba(153, 102, 255, 1)",
                        "rgba(255, 159, 64, 1)"
                    ],
                    borderWidth: 1
                }
            ]
        }
    </script>
    <style>
        #chartWrapper {
            width: 400px;
            height: 400px;
        }
    </style>
</head>
<body>
<div id="chartWrapper">
    <canvas id="myChart" width="400" height="400"></canvas>
</div>
</body>
<script src="myChart.js"></script>
</html>

myChart.js

var thickness = {
    id: "thickness",
    beforeDraw: function (chart, options) {
        let thickness = chart.options.plugins.thickness.thickness;
        thickness.forEach((item,index) => {
            chart.getDatasetMeta(0).data[index].innerRadius = item[0];
            chart.getDatasetMeta(0).data[index].outerRadius = item[1];
        });
    }
};

var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
    type: "doughnut",
    plugins: [thickness],
    data: data,
    options: {
        plugins: {
            thickness: {
                thickness: [[100,130],[80,150],[70,160],[100,130],[100,130],[100,130]],
            }
        },
    }
});

"Spirit04eK"'s solution sets the thickness in descending order of the magnitude of the value
myChart.js

var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
    type: 'doughnut',
    plugins: [
        {
            beforeDraw: function (chart) {
                const datasetMeta = chart.getDatasetMeta(0);
                const innerRadius = datasetMeta.controller.innerRadius;
                const outerRadius = datasetMeta.controller.outerRadius;
                const heightOfItem = outerRadius - innerRadius;

                const countOfData = chart.getDatasetMeta(0).data.length;
                const additionalRadius = Math.floor(heightOfItem / countOfData);

                const weightsMap = datasetMeta.data
                    .map(v => v.circumference)
                    .sort((a, b) => a - b)
                    .reduce((a, c, ci) => {
                        a.set(c, ci + 1);
                        return a;
                    }, new Map());

                datasetMeta.data.forEach(dataItem => {
                    const weight = weightsMap.get(dataItem.circumference);
                    dataItem.outerRadius = innerRadius + additionalRadius * weight;
                });
            }
        }
    ],
    data: data,
    options: {
        layout: {
            padding: 10,
        },

        plugins: {
            legend: false,
            datalabels: {
                display: false
            },
        },

        maintainAspectRatio: false,
        responsive: true,
    }
});

html 每个数据值具有不同粗细的ChartJS圆环图数据集

1条答案

相关问题

热门标签

最新问答