चार्टज बार चार्ट लीजेंड

Question

मुझे चार्ट ग्राफ का उपयोग करके बनाए गए बार ग्राफ पर दिखाने के लिए एक किंवदंती प्राप्त करने में समस्याएं आ रही हैं। प्रलेखन एक किंवदंती टेम्पलेट के बारे में बात करता है, लेकिन मुझे ग्राफ में इसे कार्यान्वित करने का एक अच्छा उदाहरण नहीं मिल रहा है। नीचे वह कोड है जिसका उपयोग मैं ग्राफ उत्पन्न करने के लिए कर रहा हूं।

<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); 

एचटीएमएल का प्रयास करें:

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

एचटीएमएल तत्व जोड़ें के स्थान के लिए लक्षित करने के लिए किंवदंतियां।

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