javascript - Chart.js 图例问题(未显示)

Question

我需要以下代码中的标签 "label: "2017" 和 label: "2018"，在右侧显示为图例图表。我已经尝试了数千种方法来使其发挥作用，但找不到解决方案。

显示图例的目的是为了识别每种颜色代表特定的年份。

JS:

<script>
    var randomScalingFactor = function(){ return Math.round(Math.random()*50)};
    var lineChartData = {

        labels : ["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"],
        datasets : [
            {

                type: 'bar',
                label: "2017",
                fillColor: "rgba(151,249,190,0.5)",
                strokeColor: "rgba(255,255,255,1)",
                pointColor : "rgba(220,220,220,1)",
                pointStrokeColor : "#fff",
                pointHighlightFill : "#fff",
                pointHighlightStroke : "rgba(220,220,220,1)",
                data : [<?php echo mostrarAño2017($oBD_);?>]
            },
            {
                type: 'bar',
                label: "2018",
                fillColor: "rgba(252,147,65,0.5)",
                 strokeColor: "rgba(255,255,255,1)",
                pointColor : "rgba(151,187,205,1)",
                pointStrokeColor : "#fff",
                pointHighlightFill : "#fff",
                pointHighlightStroke : "rgba(151,187,205,1)",
                data : [<?php echo mostrarAño2018($oBD_);?>]
            }
        ]

    }

    window.onload = function(){
    var ctx = document.getElementById("canvas").getContext("2d");
    window.myLine = new Chart(ctx).Line(lineChartData, {
        responsive: true
    });

}


</script>

Answer 1

我认为你必须将其更改为这样的内容:

<div id="container" style="width: 75%;">
    <canvas id="canvas"></canvas>
</div>
<script>
var lineChartData = {
        labels : ["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"],
        datasets : [
            {
                type: 'bar',
                label: "2017",
                backgroundColor: 'rgba(151,249,190,0.5)',
                borderColor: 'rgba(151,249,190,1)',
                borderWidth: 1,
                data : [1,2,3,4,5,6,7,8,9,10,11,12]
            },
            {
                type: 'bar',
                label: "2018",
                backgroundColor: 'rgba(252,147,65,0.5)',
                borderColor: 'rgba(252,147,65,1)',
                borderWidth: 1,
                data : [12,11,10,9,8,7,6,5,4,3,2,1]
            }
        ]
    };
window.onload = function() {
    var ctx = document.getElementById('canvas').getContext('2d');
    window.myBar = new Chart(ctx, {
        type: 'bar',
        data: lineChartData,
        options: {
            responsive: true,
            legend: {
                position: 'top',
            },
            title: {
                display: true,
                text: 'Chart'
            }
        }
    });
};
</script>