ロゴ画像でラベルを変更する

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コードをいじる必要があります。私の最善の提案は、ラベル自体にイメージを追加しようとするのを避けることです。

ベストのものであろうアイコンを使用するためのソリューション：自分の

1. 使用した画像が、適切な位置にチャートの周りにそれらを配置し、必要に応じて、ラベルにEMを参照してください。

2. アイコンフォントを使用して、アイコンをテキストの文字として挿入します。ここで（thisフィドルのオフに基づいて）あなたのデータを使用して、Font Awesomeを使用した例です：

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>