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

ここでは、私が探している解決策がありますが、達成しようとしているものが欠けているJSFiddleがあります。私はそれぞれの伝説に追加したいです。したがって、凡例が "UUV"を印刷する場合は、その場所にインボイスタイプのユーザーを識別する場所を追加します。 "UUV" + "シャーシ"のようなもの。私たちがそれに付加しているものがInvoiceタイプで、 "var InvoiceTypes"という変数があり、それにオブジェクトを渡すと、 "UUV"のような場所コードがそのInvoiceタイプ場所コードに請求書タイプを追加します。

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 
     },