在Chart.js画布中包含图例

这个问题很难回答，但我还没有找到一个能给出答案的帖子。我已经设法使用

legendTemplate

添加了一个图例，并将其显示在html中，但是在画布中没有可以显示该图例的地方

如果我想将图形导出为图像，那么最好将图例嵌入到画布中！我希望我不是唯一一个这么想的人

我见过，但据我所知，它正在为非画布标记生成html

编辑---

我已经在画布上测试了svg图像的方法，但没有成功

---

这是

，而不是改变CART.JS来做它，您可能想使用一个通用的HTML来考虑CabVIEW解决方案来保持它的灵活性。

一个例子是

从上面的链接

你不能只是把HTML画进画布。相反，您需要使用 包含要呈现的内容的SVG图像。绘制HTML 内容，则使用包含HTML的

元素 将SVG图像绘制到画布中

---

这是您的代码的改编版本。我在精神上没有太大的改变，只是把一些代码移动了一下

另外，请注意，这在IE中不起作用。但我想你只是想根据你的评论使用Chrome

脚本

var radarChartData = {
  labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
  datasets: [{
    label: "My First dataset",
    fillColor: "rgba(220,220,220,0.2)",
    strokeColor: "rgba(220,220,220,1)",
    pointColor: "rgba(220,220,220,1)",
    pointStrokeColor: "#fff",
    pointHighlightFill: "#fff",
    pointHighlightStroke: "rgba(220,220,220,1)",
    data: [65, 59, 90, 81, 56, 55, 40]
  }, {
    label: "My Second dataset",
    fillColor: "rgba(151,187,205,0.2)",
    strokeColor: "rgba(151,187,205,1)",
    pointColor: "rgba(151,187,205,1)",
    pointStrokeColor: "#fff",
    pointHighlightFill: "#fff",
    pointHighlightStroke: "rgba(151,187,205,1)",
    data: [28, 48, 40, 19, 96, 27, 100]
  }]
};

// legend for Chart
var legend = "<ul style=\"list-style-type:none;\">";
radarChartData.datasets.forEach(function(dataset){
  legend += "<li><div style=\"background-color:" + dataset.strokeColor + ";height:0.5em;width:0.5em;float:left;margin-top:0.5em;margin-right:0.5em;\"></div><span style='font-family:Verdana;font-size: 12px;'>";
  if (dataset.label) {
    legend += dataset.label
  }
  legend += "</span></li>";
})
legend += "</ul>";

var data = '<svg xmlns="http://www.w3.org/2000/svg">' +
  '<foreignObject width="100%" height="100%">' +
  '<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:20px">' +
  legend +
  '</div>' +
  '</foreignObject>' +
  '</svg>';

var DOMURL = window.URL || window.webkitURL || window;
var img = new Image();
var svg = new Blob([data], {
  type: 'image/svg+xml;charset=utf-8'
});
var url = DOMURL.createObjectURL(svg);

img.onload = function() {
  DOMURL.revokeObjectURL(url);

  Chart.types.Radar.extend({
    name: "RadarAlt",
    draw: function() {
      this.scale.yCenter = this.chart.width / 2;
      Chart.types.Radar.prototype.draw.apply(this, arguments);
      this.chart.ctx.drawImage(img, 0, this.chart.width);
    }
  });

  // create chart
  var ctx = document.getElementById("radaranalytics").getContext('2d');
  var radar = new Chart(ctx).RadarAlt(radarChartData, {
    responsive: true
  });
}
img.src = url;

var-radarChartData={
标签：[“吃”、“喝”、“睡”、“设计”、“编码”、“骑自行车”、“跑步”]，
数据集：[{
标签：“我的第一个数据集”，
填充颜色：“rgba（220220,0.2）”，
strokeColor:“rgba（2201）”，
点颜色：“rgba（220220,1）”，
pointStrokeColor:“fff”，
pointHighlightFill:“fff”，
pointHighlightStroke:“rgba（2201）”，
数据：[65,59,90,81,56,55,40]
}, {
标签：“我的第二个数据集”，
填充颜色：“rgba（151187205,0.2）”，
strokeColor:“rgba（151187205,1）”，
点颜色：“rgba（151187205,1）”，
pointStrokeColor:“fff”，
pointHighlightFill:“fff”，
pointHighlightStroke:“rgba（151187205,1）”，
数据：[28,48,40,19,96,27,100]
}]
};
//图表图例
var legend=“
";
radarChartData.datasets.forEach（函数（数据集）{
图例+=“
”；
if（dataset.label）{
图例+=dataset.label
}
图例+=“
”；
})
图例+=“
”；
var数据=“”+
'' +
'' +
传奇+
'' +
'' +
'';
var DOMURL=window.URL | | window.webkitURL | | window；
var img=新图像（）；
var svg=新的Blob（[data]{
键入：“image/svg+xml；charset=utf-8”
});
var url=DOMURL.createObjectURL（svg）；
img.onload=函数（）{
revokeObjectURL（url）；
Chart.types.Radar.extend({
名称：“拉达拉特”，
绘图：函数（）{
this.scale.yCenter=this.chart.width/2；
图表。类型。雷达。原型。绘图。应用（这个，参数）；
this.chart.ctx.drawImage（img，0，this.chart.width）；
}
});
//创建图表
var ctx=document.getElementById（“radaranalytics”）.getContext（“2d”）；
var雷达=新海图（ctx）。雷达雷达（radarChartData{
回答：对
});
}
img.src=url；

HTML

<canvas id="radaranalytics" height="350" width="300" />

---

---

Fiddle-

您可以使用position equal图表区域在画布中插入图例，例如：

var chart = new Chart(ctx, {
...
options: {
    plugins: {
        legend: {
            display: true,
            position: 'chartArea'
        }
    }
 }
});

---

如果我错了，请告诉我：您的建议是，使用您提供的页面创建一个画布，在其中创建一个svg图像，其中包含Chart.js canvas+html图例？创建chartjs Chart，创建包含图例html的svg元素，创建画布并将两者复制到其中。好的，这就是我当时理解的：）我会尝试。我升级投票，但在我成功完成之前不要将其设置为接受。当然。如果您的图例模板非常简单，并且将保持简单，您可以使用onanimationcomplete回调将图例写入chart.js。我没有签出此回调。也许使用它会更容易