Chartjs 범례 작성에서 여러 데이터 세트 문제가있는

Question

chartjs & 여러 데이터 세트가있는 도넛 형 차트를 만드는 중입니다. 그래서 나는 개별 레이블 &을 보여줘야 만한다.

여러 데이터 세트의 라벨을 표시하는 데 약간의 문제가있어서 here의 해킹을 사용했습니다. 그러나 전설도 보여줘야합니다. & 제대로 표시 할 수 없습니다.

다음은 내가 시도한 것의 필자입니다. https://jsfiddle.net/pyva3fos/

HTML :

<div id="canvas-holder" style="width:100%"> 
    <canvas id="myChart" width="400" height="400" /> 
</div> 

스크립트 :

var ctx = $("#myChart"); 
    var myChart = new Chart(ctx, { 
    type: 'doughnut', 
    data: { 
     labels: ["Market ", "J1", "J2","Market","J share"], 
     datasets: [{ 
     data: [61, 11,27], 
     backgroundColor: [ 
      '#00205A', 
      '#97BAFF', 
      '#D9D9D9' 
     ], 
     labels: [ 
      'Market Share', 
      'J1', 
      'J2' 
     ] 
     }, { 
     data: [61, 39], 
     backgroundColor: [ 
      '#00205A', 
      '#747474',   
     ], 
     labels: [ 
      'Market Share ', 
      'J Share', 
     ], 
     }, ] 
    }, 
    options: { 
     responsive: true, 
     legend: { 
     display: true, 
     position:'bottom' 
     }, 
     tooltips: { 
     callbacks: { 
      label: function(tooltipItem, data) { 
      var dataset = data.datasets[tooltipItem.datasetIndex]; 
      var index = tooltipItem.index; 
      return dataset.labels[index] + ': ' + dataset.data[index]; 
      } 
     } 
     } 
    } 
    }); 

Answer 1

별도의 전설을 만들 수 legendCallback 기능을 사용합니다. https://jsfiddle.net/ztnb3h7y/

HTML :

<div id="canvas-holder" style="width:100%"> 
    <canvas id="myChart" width="400" height="400" /> 
</div> 

<div id="chartjs-legend" style="width:100%;" > 
</div> 

CSS :

.Mylegend { list-style: none; } 

.Mylegend li { float: left; margin-right: 10px; } 

.Mylegend span 
{ border: 1px solid #ccc; float: left; width: 15px; height: 12px; margin: 2px; } 

JS :

function containsObject(obj, list) { 
    var i; 
    for (i = 0; i < list.length; i++) { 
    if (list[i].label == obj.label) {   
      return true; 
     } 
    } 
    return false; 
} 

var ctx = $("#myChart"); 
    var myChart = new Chart(ctx, { 
    type: 'doughnut', 
    data: { 
     labels: ["Market ", "J1", "J2","Market","J Share"], 
     datasets: [{ 
     data: [61, 11,27], 
     backgroundColor: [ 
      '#00205A', 
      '#97BAFF', 
      '#D9D9D9', 
      '#00205A', 
      '#747474',   
     ], 
     labels: [ 
      'Market Share', 
      'J1', 
      'J2' 
     ] 
     }, { 
     data: [61, 39], 
     backgroundColor: [ 
      '#00205A', 
      '#747474',   
     ], 
     labels: [ 
      'Market Share', 
      'J Share', 
     ], 
     }, ] 
    }, 
    options: { 
     responsive: true, 
     showAllTooltips: true, 
     legendCallback: function(chart) { 
    var text = []; 
    var legs = []; 
    for(var j=0; j<chart.data.datasets.length;j++) 
    { 
     for (var i = 0; i < chart.data.datasets[j].data.length; i++) 
     { 
      var newd = { label: chart.data.datasets[j].labels[i] , color: chart.data.datasets[j].backgroundColor[i] }; 

      if(!containsObject (newd,legs)) 
      { 
      legs.push(newd); 
      }   
     } 
    } 

    text.push('<ul class="Mylegend ' + chart.id + '-legend">'); 
    for(var k =0;k<legs.length;k++) 
    { 
    text.push('<li><span style="background-color:' + legs[k].color + '"></span>'); 
    text.push(legs[k].label); 
    text.push('</li>');  
    }  
    text.push('</ul>'); 
    return text.join(""); 
    },  
     legend: { 
     display: false,   
     }, 
     tooltips: { 
     callbacks: { 
      label: function(tooltipItem, data) { 
      var dataset = data.datasets[tooltipItem.datasetIndex]; 
      var index = tooltipItem.index; 
      return dataset.labels[index] + ': ' + dataset.data[index]; 
      } 
     } 
     } 
    } 
    }); 


    $("#chartjs-legend").html(myChart.generateLegend());