Chart.js legendcallback

Question

legendcallback과 관련된 문제가 발생했습니다. 템플릿을 사용하고 사용자 지정 템플릿을 사용하지 않는 HTML을 변경하려고 시도했지만 템플릿을 벗어나 템플릿을 벗어나지 않습니다. 커스텀 템플릿. 그래서 여기

var myChart = new Chart(ctx, { 
    type: "bar", 
    data: SetData, 
    options: { 
     tooltips: { 
      enabled: true, 
      mode: 'single', 
      callbacks: { 
       label: function (tooltipItem, data) { 
        return data.datasets[tooltipItem.datasetIndex].label + ": " + numberWithCommas(tooltipItem.yLabel); 
       } 
      } 
     }, 
     scales: { 
      yAxes: [{ 
       ticks: { 
        beginAtZero: true, 
        userCallback: function (value, index, values) { 

         return addCommas(value); 
        } 
       } 
      }], 
      xAxes: [{ 
       ticks: { 
       } 
      }] 
     } 
    }, 
    legendCallback: function (chart) { 
     var legendHtml = []; 
     legendHtml.push('<table>'); 
     legendHtml.push('<tr>'); 
     for (var i = 0; i < chart.data.datasets.length; i++) { 
      legendHtml.push('<td><div class="chart-legend" style="background-color:' + chart.data.datasets[i].backgroundColor + '"></div></  td>'); 
      if (chart.data.datasets[i].label) { 
       legendHtml.push('<td class="chart-legend-label-text">' + chart.data.datasets[i].label + '</td>'); 
      } 
     } 
     legendHtml.push('</tr>'); 
     legendHtml.push('</table>'); 
     return legendHtml.join(""); 
    }, 
    legend: { 
     display: false 
    } 
}); 

Answer 1

는 I가하지만 난 달성하기 위해 노력하고 있다는없는 뭔가를 찾고 해결책을 가지고 JSFiddle이다. 각 전설에 덧붙이고 싶습니다. 그래서 범례가 "UUV"를 인쇄하면 해당 인보이스 유형의 사용자를 식별 할 수있는 위치가 추가됩니다. "UUV"+ "섀시"와 같은 것. 말하자면 우리가 추가하는 것은 인보이스 유형이며, "var InvoiceTypes"변수가 있고 객체를 전달하면 "UUV"와 같은 위치 코드가 인보이스 유형과 일치하는지 확인하는 조건을 가장 많이 사용합니다 인보이스 유형을 위치 코드에 추가하십시오.

var options = { 
    responsive: true, 
    scaleBeginAtZero: true, 
    legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"> <% for (var i=0; i<segments.length; i++) {%> <li><span style=\"background- 
color:<%=segments[i].fillColor%>\"></span> <%if(segments[i].label){%> 
<%=segments[i].label%> <% } %> </li> <%}%> </ul>" 
    } 

    // PIE 
    // PROPERTY TYPE DISTRIBUTION 
    // context 
    var ctxPTD = $("#property_types").get(0).getContext("2d"); 
    // data 
    var dataPTD = [ 
     { 
      label: "Single Family Residence", 
      color: "#5093ce", 
      highlight: "#78acd9", 
      value: 52 
     }, 
     { 
      label: "Townhouse/Condo", 
      color: "#c7ccd1", 
      highlight: "#e3e6e8", 
      value: 12 
     },