如何使用chartjs绘制图表?我尝试自定义,但无法自定义chartjs。我期待的是下面的照片:
xoefb8l81#
你试过chartjs-plugin-datalabels吗?
const ctx = document.getElementById('myChart'); Chart.register(ChartDataLabels); const generateColors = (n) => Array.from({ length: n }, (_, i) => `hsl(${i / n * 360}, 100%, 80%)`) const data = [300, 200, 150, 100, 80, 70, 50, 30, 20], sum = data.reduce((a, b) => a + b, 0), colors = generateColors(data.length); new Chart(ctx, { type: 'pie', plugins: [ChartDataLabels], data: { labels: data.map((_, i) => `d${i+1}`), datasets: [{ label: 'My First Dataset', data: data, backgroundColor: colors, hoverOffset: 4 }] }, options: { borderColor: 'rgba(0, 0, 0, 0.1)', color: '#FFF', plugins: { datalabels: { anchor: 'end', color: colors, backgroundColor: 'rgba(0, 0, 0, 0.75)', borderRadius: 12, padding: 4, formatter: value => `${Math.round(value / sum * 100)}%`, labels: { title: { font: { weight: 'bold' } } } } } } });
*, *::before, *::after { box-sizing: border-box; } html, body { width: 100%; height: 100%; margin: 0; padding: 0; } body { background: #000; display: flex; justify-content: center; padding: 4px; } .chart-container { width: 400px; height: 400px; background: #222; padding: 1rem; border: thin solid #777; }
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0/dist/chart.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script> <div class="chart-container"> <canvas id="myChart"></canvas> </div>
zujrkrfu2#
我找到了解决办法:
<canvas id="myChart-tab1"></canvas> <script> var ctx_tab1 = document.getElementById('myChart-tab1').getContext('2d'); var labels = ['UNICEF', 'Save the Children', 'UNOCHA', 'World Food Programme', 'WHO', 'UNAMA', 'RED CRESCENT', 'UNFPA', 'UNCHR', 'UN WOMEN', 'WAR CHILD AFGHANISTAN']; var doughnutChart = new Chart(ctx_tab1, { type: 'doughnut', data: { labels: labels, datasets: [{ backgroundColor: [ 'rgba(255, 99, 132)', 'rgba(54, 162, 235)', 'rgba(255, 206, 86)', 'rgba(75, 192, 192)', 'rgba(153, 102, 255)', 'rgba(255, 159, 64)', 'rgba(255, 99, 132)', 'rgba(54, 162, 235)', 'rgba(255, 206, 86)', 'rgba(75, 192, 192)', 'rgba(153, 102, 255)', ], data: [41, 20, 9, 8, 8, 4, 3, 3, 2, 2, 10], datalabels: { anchor: 'end', align: 'end', } }] }, options: { plugins: { datalabels: { backgroundColor: function(context) { // return context.dataset.backgroundColor; }, // borderColor: 'white', // borderRadius: 25, // borderWidth: 2, // color: 'white', display: function(context) { var dataset = context.dataset; var count = dataset.data.length; var value = dataset.data[context.dataIndex]; // return value > count * 1.5; return value; }, font: { weight: 'bold' }, padding: 0, formatter: function(value) { return value + '%'; } }, legend: { display: true, position: 'right', align: 'center', labels: { usePointStyle: true, pointBackgroundColor: "rgba(0,191,255)", pointStyle: 'rectRounded', padding: 10, color: '#000', font: { size: 12 }, }, } }, // Core options aspectRatio: 4 / 3, cutoutPercentage: 32, layout: { padding: 32 }, elements: { line: { fill: false }, point: { hoverRadius: 7, radius: 5 } }, } }); </script>
2条答案
按热度按时间xoefb8l81#
你试过chartjs-plugin-datalabels吗?
zujrkrfu2#
我找到了解决办法: