Question

正如标题所说，ChartJS的自定义图例未包含在我从画布中保存的图像中，这可能也是问题，因为图例中不包含图例不再包含在图像中。有没有办法在画布中包含自定义图例？

var myChart = new Chart(document.getElementById('mychart'), {
type: 'pie',
animation:{
    animateScale:true
},
data: {
    labels: visitData,
    datasets: [{
        label: 'Visitor',
        data: visitorData,
        backgroundColor: [
            "#a2d6c4",
            "#36A2EB",
            "#3e8787",
            "#579aac",
            "#7dcfe8",
            "#b3dfe7",
        ]
    }]
},
options: {
    responsive: true,
    legend: false,
    legendCallback: function(chart) {
        var legendHtml = [];
        legendHtml.push('<ul>');
        var item = chart.data.datasets[0];
        for (var i=0; i < item.data.length; i++) {
            legendHtml.push('<li>');
            legendHtml.push('<span class="chart-legend" style="background-color:' + item.backgroundColor[i] +'"></span>');
            legendHtml.push('<span class="chart-legend-label-text">' + item.data[i] + ' person - '+chart.data.labels[i]+' times</span>');
            legendHtml.push('</li>');
        }

        legendHtml.push('</ul>');
        legendHtml.push('<table border="1" width="600"><tr><th>Company</th><th>Contact</th><th>Country</th></tr><tr><td>Alfreds Futterkiste</td><td>Maria Anders</td><td>Germany</td></tr><tr><td>Centro comercial Moctezuma</td><td>Francisco Chang</td><td>Mexico</td></tr><tr><td>Ernst Handel</td><td>Roland Mendel</td><td>Austria</td></tr><tr><td>Island Trading</td><td>Helen Bennett</td><td>UK</td></tr><tr><td>Laughing Bacchus Winecellars</td><td>Yoshi Tannamuri</td><td>Canada</td></tr><tr><td>Magazzini Alimentari Riuniti</td><td>Giovanni Rovelli</td><td>Italy</td></tr></table>');
        return legendHtml.join("");
    },
    tooltips: {
         enabled: true,
         mode: 'label',
         callbacks: {
            label: function(tooltipItem, data) {
                var indice = tooltipItem.index;
                return data.datasets[0].data[indice] + " person visited " + data.labels[indice] + ' times';
            }
         }
     },
}
});

$('#my-legend-con').html(myChart.generateLegend());

如果是自定义图例，则ChartJS图例不包含在图像中

0 个答案: