Chartjs條形圖圖例

Question

我在使用chartjs創建的條形圖上顯示圖例時出現問題。該文檔討論了一個圖例模板，但我似乎無法找到一個很好的例子來說明如何在圖表中實現它。以下是我用來生成圖形的代碼。

<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

下面的答案是CHARTJS 1.X

所以下面是如何使用的是需要給予每個數據集的標籤設置了一個傳奇的例子，使用默認傳說模板所有你需要做的就是在圖表上調用generateLegend()，然後將這個頁面

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

我有一個答案，這是工作的罰款...

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

試試這個

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

最新的版本2.6.0，它可以使用legendCallback

設置的傳說模板來完成：

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(""); 
    }, 

添加HTML元素爲目標的位置傳說。

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

然後生成傳說：

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