ChartJS不显示图例

Question

我正在使用ChartJS，由于某种原因，我无法显示图例。这是html结构：

 <canvas id="trend_chart"></canvas>

这是js配置：

var chart_labels = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];
var ctx = document.getElementById("trend_chart").getContext('2d');

var config = {
    type: 'bar',
    responsive: true,
    type: 'line',
    data: {
        labels: chart_labels,
        datasets: []
    },
    options: {
        legend: {
            display: true
        },
        scales: {
            yAxes: [{
                ticks: {
                    max: 100,
                    display: true,
                    beginAtZero: true
                }
            }]
        }
    }
};

var myChartData = new Chart(ctx, config);

最终结果是这样

Answer 1

在数据集中添加数据。如果数据为空，则将默认数据添加为0，以显示图例。

var chart_labels = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];
var ctx = document.getElementById("trend_chart").getContext('2d');

var config = {
    type: 'bar',
    responsive: true,
    type: 'line',
    data: {
        labels: chart_labels,
        datasets: [{
          label: chart_labels[0],
          data: [0]
         }, {
          label: chart_labels[1],
          data: [0]
         }, {
            label: chart_labels[2],
            data: [0]
         }, {
            label: chart_labels[3],
            data: [0]
         }, {
            label: chart_labels[4],
            data: [0]
         }, {
            label: chart_labels[5],
            data: [0]
         }, {
            label: chart_labels[6],
            data: [0]
         }, {
            label: chart_labels[7],
            data: [0]
         }, {
            label: chart_labels[7],
            data: [0]
         }, {
            label: chart_labels[8],
            data: [0]
         }, {
            label: chart_labels[9],
            data: [0]
         }, {
            label: chart_labels[10],
            data: [0]
         }, {
            label: chart_labels[11],
            data: [0]
         }
      ]
    },
    options: {
        legend: {
            display: true
        },
        scales: {
            yAxes: [{
                ticks: {
                    max: 100,
                    display: true,
                    beginAtZero: true
                }
            }]
        }
    }
};

var myChartData = new Chart(ctx, config);