Chart.js不显示图例

Question

Chart.js没有显示图例。我使用的是2.4.0版本，并在我的网站中包含了Chart.bundle.min.js脚本。

所有变量，如lineaRoja、puntos、MuPu都已定义，数据显示正确。

问题是图例与其相应颜色的Falla balanceada、Mu y Pu aplicados和Diagrama M-P未显示。只有当我将鼠标悬停在点上时才会显示工具提示。

var canvas = document.getElementById(domId);
var ctx = canvas.getContext("2d");
var lineChart = new Chart(ctx, {
        type: 'line',
        data: {
            datasets: [{
                label: 'Diagrama M-P',
                data: puntos
            }, {
                label: 'Falla balanceada',
                backgroundColor: 'rgba(0,0,0,0)',
                borderColor: 'rgba(130,0,0,0.6)',
                data: [{ x: 0, y: 0}, { x: lineaRoja[0], y: lineaRoja[1] }],
                borderDash: [10, 5]
            }, {
                type: 'scatter',
                data: MuPu,
                fill: false,
                showLine: false,
                backgroundColor: 'rgba(0,130,0,0.6)',
                label: 'Mu y Pu aplicados',
                pointRadius: 6

            }]
        },
        options: {
          animation: { duration: 0 },

            scales: {
              xAxes: [{
                  type: 'linear',
                  position: 'bottom',
                  scaleLabel: {
                    display: true,
                    labelString: 'Ton'
                  }
              }],
              yAxes: [{
                scaleLabel: {
                  display: true,
                  labelString: 'Ton m'
                },
                ticks: {
                    min: 0,
                    beginAtZero: true
                }
          }]
          }
        }
    });

- Chris Vilches

---

看起来较新版本的ChartJS要求您注册要使用的各个元素。您需要特别注册图例。https://dev59.com/hLD3oIgBc1ULPQZFGv2E - Ivan Rubinson

Answer 1

在将图例配置添加到选项中后，可以参考Chart.js文档上的图例。

const chart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: {
        plugins: {
            legend: {
                display: true,
            }
        }
    }
});

当使用构建工具，如Webpack或Rollup时，您需要导入和注册模块集成 - Chart.js文档:

Chart.register(
  Legend,
)

或者使用自动注册方法之一：

import { Chart, registerables } from 'chart.js';
Chart.register(...registerables);

或者：

import Chart from 'chart.js/auto';

- tdhulster

---

我错过了注册，所有东西都悄无声息地失败了。谢谢。 - Igor Skoric

Answer 2

您可以在选项中添加这个。

legend: {
     display: true
}

- Durgpal Singh

Answer 3

解决了，我使用的Bootstrap模板在其.js文件中有这段代码。

Chart.defaults.global.legend = {
  enabled: false
};

- Chris Vilches

---

我花了超过6个小时来调试，最终发现这就是我的问题。谢谢！ - suo

Answer 4

要显示图例标签，请将以下内容添加到您的配置中。

legend: {
    display: true
}

- Gonzalo Chacaltana