Как показать данные диаграммы диаграммы данных диаграммы в виде текста?

Question

Я создаю диаграмму с использованием chartjs.org, и я пытаюсь показать значения меток вертикальной оси как тексты (например: «по производительности», «хорошо», «хорошо», «отлично»).

любезно проверьте этот каркас для лучшего понимания. http://i.imgur.com/HmC1vkU.png

Вот мой код выглядит.

<canvas id="barChart" height="200"></canvas> 

var barData = { 
     labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], 
     datasets: [ 
      { 
       label: "Late", 
       fillColor: "rgba(3,169,244,0.5)", 
       strokeColor: "rgba(3,169,244,0.8)", 
       highlightFill: "rgba(3,169,244,0.75)", 
       highlightStroke: "rgba(3,169,244,1)", 
       data: [19, 25, 46, 77, 90, 95, 35],     
      }, 
      { 
       label: "My Second dataset", 
       fillColor: "rgba(26,179,148,0.5)", 
       strokeColor: "rgba(26,179,148,0.8)", 
       highlightFill: "rgba(26,179,148,0.75)", 
       highlightStroke: "rgba(26,179,148,1)", 
       data: [25, 35, 55, 60, 60, 88, 15],     
      } 
     ] 
    }; 

    var barOptions = { 
     scaleBeginAtZero: true, 
     scaleShowGridLines: true, 
     scaleGridLineColor: "rgba(0,0,0,.05)", 
     scaleGridLineWidth: 1, 
     barShowStroke: true, 
     barStrokeWidth: 2, 
     barValueSpacing: 5, 
     barDatasetSpacing: 1, 
     responsive: false, 
    } 

    var ctx2 = document.getElementById("barChart").getContext("2d"); 
    window.myPieB = new Chart(ctx2).Bar(barData, barOptions); 

Я хотел бы иметь некоторые предложения по этому вопросу. Дай мне знать, если что-нибудь понадобится с моей стороны.

Answer 1

ChartJS - это хорошая, но простая графическая библиотека.

Вместо того, чтобы изменять исходный код ChartJS для отображения ваших пользовательских легенд, вам, вероятно, проще создать свою гистограмму в собственном холсте html с использованием строк и прямоугольников.

Уильям Мэлоун делает хорошую работу, описывающие barcharts здесь:

http://www.williammalone.com/articles/html5-canvas-javascript-bar-graph/

вы решите настроить ChartJS или «свернуть свой собственный», вот код нарисовать текст поворачивается вертикально и центрированные на заданном X , Y:

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 

 
var x=50; 
 
var y=50; 
 
var width=75; 
 
var height=200; 
 

 
ctx.strokeRect(x,y,width,height); 
 

 
vertCenteredText(x+width*1/3,y+height/2,'Arrived On-Time'); 
 
vertCenteredText(x+width*1/2,y+height/2,'Logged-In On-Time'); 
 
vertCenteredText(x+width*2/3,y+height/2,'Tasks Completed On-Time'); 
 

 
function vertCenteredText(x,y,text){ 
 
    var ta=ctx.textAlign; 
 
    var tb=ctx.textBaseline; 
 
    ctx.translate(x,y); 
 
    ctx.rotate(-Math.PI/2); 
 
    ctx.textAlign='center'; 
 
    ctx.textBaseline='middle'; 
 
    ctx.fillText(text,0,0); 
 
    // clean up by undoing our changes to canvas state 
 
    ctx.setTransform(1,0,0,1,0,0); 
 
    ctx.textAlign=ta; 
 
    ctx.textBaseline=tb; 
 
}

body{ background-color: ivory; } 
 
#canvas{border:1px solid red;}

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