0
174
Vistas¿Es posible hacer que un gráfico de radar tenga un relleno multicolor usando Chart.js?
El gráfico de radar parece tener solo 1 color de relleno para un conjunto de datos.
Me gustaría que el color de relleno cambie a lo largo del eje. Algo a lo largo de estas líneas:
¿Es esto posible en Chart.js o debo elegir otra biblioteca?
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
var marksCanvas = document.getElementById("canvas"); function createRadialGradient3(context) { const chartArea = context.chart.chartArea; if (!chartArea) { // This case happens on initial chart load return; } const chartWidth = chartArea.right - chartArea.left; const chartHeight = chartArea.bottom - chartArea.top; width = chartWidth; height = chartHeight; const centerX = (chartArea.left + chartArea.right) / 2; const centerY = (chartArea.top + chartArea.bottom) / 2; const ctx = context.chart.ctx; var gradient = ctx.createConicGradient(-1.0472, centerX, centerY); // The pattern is 30 degrees of blend between quadrants // 60 degrees of pure color in the quadrant gradient.addColorStop(0, 'rgba(78, 190, 235, .40)'); //blue gradient.addColorStop(.16667, 'rgba(78, 190, 235, .40)'); //blue gradient.addColorStop(0.25, 'rgba(255, 152, 49, .40)'); //orange gradient.addColorStop(0.41667, 'rgba(255, 152, 49, .40)'); //orange gradient.addColorStop(0.5, 'rgba(96, 230, 225, .40)'); // turqoise gradient.addColorStop(0.66667, 'rgba(96, 230, 225, .40)'); // turqoise gradient.addColorStop(0.75, 'rgba(45, 183, 87, .40)'); //green gradient.addColorStop(0.91667, 'rgba(45, 183, 87, .40)'); //green gradient.addColorStop(1, 'rgba(78, 190, 235, .40)'); //blue // Set the fill style and draw a rectangle ctx.fillStyle = gradient; ctx.fillRect(chartArea.left, chartArea.top, chartWidth, chartHeight); return gradient; } const data = { labels: [ 'Including', 'Aligning', 'Owning', 'Suggesting', 'Analyzing', 'Summarizing', 'Listening', 'Empathasizing', 'Validating', 'Vulnerabilty', 'Transparaency', 'Recognizing', ], datasets: [{ label: 'My First Dataset', data: [65, 59, 90, 81, 56, 55, 40,80,76,68,23,47], fill: true, backgroundColor: function(context) { return createRadialGradient3(context); }, borderColor: 'rgba(255, 99, 132, 0)', pointBackgroundColor: 'rgba(255, 99, 132,0)', pointBorderColor: '#fff', pointHoverBackgroundColor: '#fff', pointHoverBorderColor: 'rgb(255, 99, 132)' }] }; const config = { type: 'radar', data: data, options: { elements: { line: { borderWidth: 3 }, } }, }; var radarChart = new Chart(marksCanvas, config);
·
Juan Pablo Isaza
Denunciar
Responde la pregunta