Chartjs Bar Chart Huyền thoại

Question

Tôi gặp sự cố khi nhận chú giải để hiển thị trên biểu đồ thanh mà tôi đã tạo bằng cách sử dụng biểu đồj. Tài liệu nói về một mẫu chú giải, nhưng tôi dường như không thể tìm thấy một ví dụ tốt về cách thực hiện điều này vào biểu đồ. Dưới đây là mã tôi đang sử dụng để tạo biểu đồ.

<div style="width: 100%;"> 
    <canvas id="canvas" height="450" width="600"></canvas> 
<div id="legendDiv">&nbsp;</div> 
</div> 
<script> 
    var randomScalingFactor = function(){ return Math.round(Math.random()*100)}; 

    var barChartData = { 
     labels : ["Item 1","Item 2","Item 3","Item 4","Item 5","Item 6","Item 7","Item 8","Item 9","Item 10","Item 11","Item 12","Item 13","Item 14","Item 15","Item 16","Item 17"] 
     datasets : [ 
      { 
       fillColor : "rgba(166,166,166,0.5)", 
       strokeColor : "rgba(166,166,166,0.8)", 
       highlightFill: "rgba(166,166,166,0.75)", 
       highlightStroke: "rgba(166,166,166,1)", 
       data : [10,4,3,4,3,6,4,1,10,3,3,10,2,4,10,3,4] 

      }, 
      { 
       fillColor : "rgba(196,64,54,0.5)", 
       strokeColor : "rgba(196,64,54,0.8)", 
       highlightFill : "rgba(196,64,54,0.75)", 
       highlightStroke : "rgba(196,64,54,1)", 
       data : [6,3,2,3,2,3,4,1,8,3,3,6,1,3,8,3,4] 
      } 
     ] 

    } 
    window.onload = function(){ 
     var ctx = document.getElementById("canvas").getContext("2d"); 
     window.myBar = new Chart(ctx).Bar(barChartData, { 
     responsive : true 
     }); 
    } 

    </script> 
<div> 

Answer 1

CÂU TRẢ LỜI LÀ DƯỚI ĐÂY ĐỂ CHARTJS 1.x

Vì vậy, dưới đây là một ví dụ về cách bạn có thể thiết lập một huyền thoại bằng cách sử dụng nhãn mà cần phải được đưa ra đó mỗi bộ dữ liệu, sử dụng mặc định huyền thoại mẫu tất cả các bạn phải làm là gọi generateLegend() trên bảng xếp hạng và sau đó đặt này trên trang

var helpers = Chart.helpers; 
 
var canvas = document.getElementById('bar'); 
 
var randomScalingFactor = function() { 
 
    return Math.round(Math.random() * 100) 
 
}; 
 
var barChartData = { 
 
    labels: ["January", "February", "March", "April", "May", "June", "July"], 
 
    datasets: [{ 
 
     label: "My First dataset", 
 
     fillColor: "rgba(220,220,220,0.5)", 
 
     strokeColor: "rgba(220,220,220,0.8)", 
 
     highlightFill: "rgba(220,220,220,0.75)", 
 
     highlightStroke: "rgba(220,220,220,1)", 
 
     data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()] 
 
    }, { 
 
     label: "My Second dataset", 
 
     fillColor: "rgba(151,187,205,0.5)", 
 
     strokeColor: "rgba(151,187,205,0.8)", 
 
     highlightFill: "rgba(151,187,205,0.75)", 
 
     highlightStroke: "rgba(151,187,205,1)", 
 
     data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()] 
 
    }] 
 

 
    } 
 
    // 
 
var bar = new Chart(canvas.getContext('2d')).Bar(barChartData, { 
 
    tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>kb", 
 
    animation: false, 
 
}); 
 
// 
 
var legendHolder = document.createElement('div'); 
 
legendHolder.innerHTML = bar.generateLegend(); 
 

 
document.getElementById('legend').appendChild(legendHolder.firstChild);

ul { 
 
    list-style: none; 
 
} 
 
ul li { 
 
    display: block; 
 
    padding-left: 30px; 
 
    position: relative; 
 
    margin-bottom: 4px; 
 
    border-radius: 5px; 
 
    padding: 2px 8px 2px 28px; 
 
    font-size: 14px; 
 
    cursor: default; 
 
    height:20px; 
 
    width: 140px; 
 
    -webkit-transition: background-color 200ms ease-in-out; 
 
    -moz-transition: background-color 200ms ease-in-out; 
 
    -o-transition: background-color 200ms ease-in-out; 
 
    transition: background-color 200ms ease-in-out; 
 
} 
 
li span { 
 
    display: block; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 20px; 
 
    border-radius: 5px; 
 
    height:20px 
 
} 
 

 
li span.bar-legend-text { 
 
    left:25px; 
 
    width:120px; 
 
} 
 
#chart-area > *{ 
 
    float:left 
 
    }

<script src="https://raw.githack.com/chartjs/Chart.js/v1.1.1/Chart.min.js"></script> 
 
<div id="chart-area"> 
 
    <canvas id="bar" width="250" height="250" style="width: 250px; height: 250px;"></canvas> 
 
    <div id="legend"></div> 
 
</div>

http://jsfiddle.net/masiht/r5g6a3cd/

Answer 2

Tôi có một câu trả lời và nó đang làm việc tốt ...

var ctx = document.getElementById("canvas").getContext("2d"); 
 
         new Chart(ctx).HorizontalBar(barChartLocData, { 
 
          responsive: true, 
 
          scaleFontColor: "#000", 
 
          showTooltips: false, 
 
          onAnimationComplete: function() { 
 
           var ctx = this.chart.ctx; 
 
           ctx.font = this.scale.font; 
 
           ctx.fillStyle = this.scale.textColor 
 
           ctx.textAlign = "right"; 
 
           ctx.textBaseline = "right"; 
 
           this.datasets.forEach(function(dataset) { 
 
            dataset.bars.forEach(function(bar) { 
 
             ctx.fillText(bar.value, bar.x, bar.y - 5); 
 
            }); 
 
           }); 
 
          } 
 
         });

Answer 3

Hãy thử điều này

var data = { 
     labels: ["January", "February", "March", "April", "May", "June", "July"], 
     datasets: [ 
      { 
       label: "My First dataset", 
       fillColor: "rgba(151,187,205,0.5)", 
       strokeColor: "rgba(151,187,205,0.8)", 
       highlightFill: "rgba(151,187,205,0.75)", 
       highlightStroke: "rgba(151,187,205,1)", 
       data: [28, 48, 40, 19, 86, 27, 90] 
      } 
     ] 
    }; 
    var context = document.getElementById('clients').getContext('2d'); 
    var clientsChart = new Chart(context).Bar(data); 

HTML:

<canvas id="clients" width="450" height="350"></canvas> 

http://jsfiddle.net/TZq6q/299/

Answer 4

Đối với phiên bản mới nhất 2.6.0, nó có thể được thực hiện bằng legendCallback

Đặt mẫu cho những huyền thoại:

legendCallback: function(chart) { 
    var text = []; 
    text.push('<ul>'); 
    for (var i=0; i<chart.data.datasets.length; i++) { 
     console.log(chart.data.datasets[i]); // see what's inside the obj. 
     text.push('<li>'); 
     text.push('<span style="background-color:' + chart.data.datasets[i].borderColor + '">' + chart.data.datasets[i].label + '</span>'); 
     text.push('</li>'); 
    } 
    text.push('</ul>'); 
    return text.join(""); 
    }, 

Thêm yếu tố html để nhắm mục tiêu cho vị trí của các huyền thoại.

<div id="chart-legends"></div> 

Sau đó, tạo ra những huyền thoại:

document.getElementById('chart-legends').innerHTML = myChart.generateLegend();