로고 이미지가있는 라벨 변경

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>