0
175
VistasChart js: renderiza imágenes en un solo conjunto de datos
Necesito un gráfico de anillos con 2 conjuntos de datos y en 1 de ellos necesito renderizar imágenes. Pude renderizar los 2 conjuntos de datos y renderizar imágenes usando chartjs-plugin-labels pero esto agregará imágenes a ambos conjuntos de datos. ¿Hay alguna manera de decirle a chart js qué conjunto de datos necesita las imágenes?
var config = { type: 'doughnut', data: { datasets: [ /* Outer doughnut data starts*/ { data: [ 10, 20, 30 ], backgroundColor: [ "rgb(255, 0, 0)", // red "rgb(0, 255, 0)", // green "rgb(0, 0, 255)", //blue ], label: 'Doughnut 1' }, /* Outer doughnut data ends*/ /* Inner doughnut data starts*/ { data: [ 45, 25, 11 ], backgroundColor: [ "rgb(255, 0, 0)", // red "rgb(0, 255, 0)", // green "rgb(0, 0, 255)", //blue ], label: 'Doughnut 2' } /* Inner doughnut data ends*/ ], labels: [ "Info 1", "Info 2", "Info 3" ] }, options: { responsive: true, legend: { position: 'top', }, plugins: { labels: { render: 'image', images: [ null, null, { src: 'https://i.stack.imgur.com/9EMtU.png', width: 20, height: 20 } ] } }, title: { display: true, text: 'Chart.js Doughnut Chart' }, animation: { animateScale: true, animateRotate: true }, tooltips: { callbacks: { label: function(item, data) { console.log(data.labels, item); return data.datasets[item.datasetIndex].label+ ": "+ data.labels[item.index]+ ": "+ data.datasets[item.datasetIndex].data[item.index]; } } } } }; window.onload = function() { var ctx = document.getElementById("myChart") .getContext("2d"); window.myDoughnut = new Chart(ctx, config); }; <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.js"></script> <script src="https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js"></script> </head> <body> <canvas id="myChart"></canvas> </body> </html>
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Según la documentación , puede usar:
labels: { render: function (args) { // { label: 'Label', value: 123, percentage: 50, index: 0, dataset: {...} } // index - datasetIndex if (args.index == 1) { return { src: 'url', width: 25, height: 25 }; } return undefined; }, },
·
Juan Pablo Isaza
Denunciar
Responde la pregunta