Chart.js没有显示图例

时间:2017-10-13 22:11:03

标签: javascript chart.js

Chart.js并未显示传说。我使用的是2.4.0版,我在网站上添加了Chart.bundle.min.js脚本。

定义了lineaRojapuntosMuPu等所有变量,数据显示正确。

问题在于Falla balanceadaMu y Pu aplicadosDiagrama 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
                }
          }]
          }
        }
    });

3 个答案:

答案 0 :(得分:2)

解决了,我正在使用的Bootstrap模板在其.js

中的某个地方有这个代码
Chart.defaults.global.legend = {
  enabled: false
};

答案 1 :(得分:2)

您可以在选项中添加此内容。

legend: {
     display: true
}

答案 2 :(得分:0)

要在图表上显示图例标签,请将其添加到您的配置中。

legend: {
    display: true
}