如何在Chart.js中將圖標用作圖例？

Question

要求使用圖標替換圖例：

因此，我需要更改圖例中的國家/地區名稱才能使用每個國家/地區的標志。 有沒有辦法在Chart.js中做到這一點？ 或帶有任何圖形庫？

Answer 1

是的，Chart.js github存儲庫上有一個未解決的問題 ，但是您可以實現擴展繪圖功能的目標：

 var chartData = { "labels": ["Italy", "Germany", "Netherlands", "France", "Spain"], "datasets": [{ "data": [65, 59, 80, 81, 56], "fill": false, "backgroundColor": ["rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.5)", "rgba(255, 205, 86, 0.5)", "rgba(75, 192, 192, 0.5)", "rgba(54, 162, 235, 0.5)"], "borderColor": ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)", "rgb(75, 192, 192)", "rgb(54, 162, 235)"], "borderWidth": 1 }] }; for (var i in chartData.labels) { var lab = chartData.labels[i]; var $img = $("<img/>").attr("id", lab).attr("src", "https://www.free-country-flags.com/countries/" + lab + "/1/tiny/" + lab + ".png"); $("#pics").append($img); } var originalBarController = Chart.controllers.bar; Chart.controllers.bar = Chart.controllers.bar.extend({ draw: function() { originalBarController.prototype.draw.call(this, arguments); drawFlags(this); } }); function drawFlags(t) { var chartInstance = t.chart; var dataset = chartInstance.config.data.datasets[0]; var meta = chartInstance.controller.getDatasetMeta(0); var y0 = chartInstance.scales.y0.top + chartInstance.scales.y0.height; ctx.save(); meta.data.forEach(function(bar, index) { var lab = bar._model.label; var img = document.getElementById(lab); ctx.drawImage(img, bar._model.x - 10, y0 - 6, 20, 12); ctx.stroke(); }); ctx.restore(); } var ctx = document.getElementById("myChart").getContext("2d"); var myBar = new Chart(ctx, { "type": "bar", "data": chartData, "options": { legend: { display: false }, "scales": { "yAxes": [{ id: "y0", "ticks": { "beginAtZero": true } }] } } }); 

 #myChart { background-color: #ffffff; border: 1px solid #ff0000; } #pics { display: none; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <canvas id="myChart" height="200" width="400"></canvas> <div id="pics"></div> 

這也是一個jsfiddle： https ://jsfiddle.net/beaver71/0zderk1p/