0
600
Views¿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 answers
Answer question0
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
Report
Answer question