0
602
Visualizações¿Cómo dibujar etiquetas exteriores para gráficos polares usando ng2-charts y chart.js en posiciones fijas fuera de los anillos?
Estoy dibujando un gráfico polar con chart.js ^2.8.0 y ng2-charts ^2.3.0 en Angular. He usado chartjs-plugin-datalabels para mostrar etiquetas, pero esto no admite etiquetas en posiciones fijas fuera de los anillos del gráfico polar como este complemento para las etiquetas de visualización chart.js fuera del gráfico circular.
CÓDIGO:
myColors = [{ backgroundColor: ["rgb(203, 75, 75, 0.5)", "rgb(237, 194, 64, 0.5)", "rgb(175, 216, 248, 0.5)"] }]; ChartPlugins = [pluginDataLabels]; polarAreaChartOptions: ChartOptions = { plugins: { datalabels: { color: '#000000', anchor: 'end', align: 'end', padding: 50, display: true, font: { weight: 'bolder' }, formatter: function(value, ctx) { return `${ctx.chart.data.labels[ctx.dataIndex]} - ${value} %`; }, }, }, scale: { ticks: { beginAtZero: true, max: 100, min: 0, stepSize: 10 }, gridLines: { color: ['gray', 'gray', 'gray', 'gray', 'red','gray', 'gray', 'gray', 'gray', 'gray'], lineWidth: [1, 1, 1, 1, 3, 1, 1, 1, 1, 1] } } }; polarAreaChartType: ChartType = "polarArea";Margen
<canvas id="polar-chart" baseChart height="40vh" width="120vw" [data]="polarAreaChartData" [labels]="polarAreaChartLabels" [legend]="polarAreaLegend" [plugins]="ChartPlugins" [options]="polarAreaChartOptions" [chartType]="polarAreaChartType" [colors]="myColors"> </canvas> 
¿Hay algún complemento o complemento para mostrar las etiquetas fuera de los anillos en polar chart.js y ng2-charts?
·
Juan Pablo Isaza
1 Respostas
Responde à pergunta0
Si actualiza a chart.js V3, puede usar la compilación en pointLabels y centrarlas:
const options = { type: 'polarArea', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], backgroundColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"] }] }, options: { scales: { r: { pointLabels: { display: true, centerPointLabels: true } } } } } const ctx = document.getElementById('chartJSContainer').getContext('2d'); new Chart(ctx, options); <body> <canvas id="chartJSContainer" width="600" height="400"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.js"></script> </body>
·
Juan Pablo Isaza
Relatório
Responde à pergunta