如何在Chart.js中将图标用作图例？

Question

有一个使用图标替换图例的请求：

因此，我需要在图例中更改国家名称以使用每个国家的旗帜。是否可以在 Chart.js 中或者任何其他图形库中实现这一功能？

- HelmiB

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/

- beaver

---

嗨，我运行了代码，它还没有给出标志，仍然只给出国家名称。请重新检查你的片段好吗？ - HelmiB

是的，我尝试了代码片段和JSFiddle。我在Safari和Chrome上运行了同样的结果。我错过了什么吗？ - HelmiB

但是，如果您在jsfiddle上打开脚本，打开Chrome网络选项卡并单击“运行”，您会看到所有标志PNG图片以状态200下载？ - beaver

这是您应该看到的内容：https://imgur.com/a/WjUSo。打开 https://www.free-country-flags.com/countries/Italy/1/tiny/Italy.png 您可以看到意大利国旗？ - beaver

使用另一个标志图标仓库... https://jsfiddle.net/beaver71/w658LLqL/ （图标来自https://cdn2.iconfinder.com） - beaver