Question

我尝试使用chart.js构建图表，我想用logtype小图片替换标签。

有可能吗？无法找到实现目标的方法。感谢。

这是我的图表选项：

var horizontalBarChartData3 = {
    labels: ["mark1", "mark2", "mark3", "mark4","mark5"],
    datasets: [
    {
        label: 'USA',
        backgroundColor: "rgba(196,196,196,0.5)",
        data: [0.07,0.02,0.26,0.68,0.21]
    }, 
    {
         hidden: false,
         label: 'EUROPA',
         backgroundColor: "rgba(125,125,125,0.5)",
         data: [0.09,0.02,0.31,0.74,0.23]
    }, 
    {
         label: 'CHINA',
         backgroundColor: "rgba(165,157,4,0.5)",
         data: [0.15,0.02,0.38,0.99,0.27]
    }]
};

Answer 1

向标签添加图像是一项棘手的调整，并且需要摆弄chart.js代码，因为它本身不受支持。我最好的建议是避免尝试将图像添加到标签本身。

使用图标的最佳解决方案之一是：

使用您自己的图像，但将它们放在图表的正确位置，如果需要，请参阅标签中的em。
使用图标字体将图标作为文本字符插入。以下是使用Font Awesome的示例，使用您的数据（基于this小提琴）：

var randomScalingFactor = function () {
    return Math.round(Math.random() * 100);
};

var barChartData = {
    pointLabelFontFamily: "'FontAwesome'",
    labels: ["\uf000", "\uf001", "\uf002", "\uf003", "\uf004"],
    datasets: [
{
    label: 'USA',
    backgroundColor: "rgba(196,196,196,0.5)",
    data: [0.07,0.02,0.26,0.68,0.21]
}, 
{
     hidden: false,
     label: 'EUROPA',
     backgroundColor: "rgba(125,125,125,0.5)",
     data: [0.09,0.02,0.31,0.74,0.23]
}, 
{
     label: 'CHINA',
     backgroundColor: "rgba(165,157,4,0.5)",
     data: [0.15,0.02,0.38,0.99,0.27]
}]

};

    var ctx = document.getElementById("canvas").getContext("2d");
    window.myBar = new Chart(ctx).Bar(barChartData, {
        responsive: true,
        scaleFontFamily: "'FontAwesome'"
    });

<script src="http://chartjs.org/assets/Chart.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">

<div style="width: 75%">
    <span style="font-family: FontAwesome">&#xf015;</span>
    <canvas id="canvas" height="450" width="600"></canvas>
</div>

使用徽标图像更改标签

1 个答案: