传说没有显示

Question

<Div>is defined in the html code for line chart representation.The data is populated from database and the graph is plotted based on the same data but legends are not displayed.

HTML CODE

<div id="chart-container">
        <canvas id="scurve_chart"></canvas>
</div>

javascript code

The data populated from database is converted to json_encode format and saved to an array.from this array data are taken and ploted in the graph .

 $(document).ready(function () {
            show_scurve_Graph();

   });
   function show_scurve_Graph()
        {
            {
                var data = <?php echo json_encode($data_plan); ?>;

                    //console.log();
                     var labels = [];
                    var chart1 = [];
                    var chart2 = [];
                    var chart3 = [];
                    var spent = [];

                    for (var i in data) {
                        labels.push(data[i].label);
                        chart1.push(data[i].chart1);
                        chart2.push(data[i].chart2);
                        chart3.push(data[i].chart3);
                        spent.push(data[i].spent);


                        }


                    var chartdata = {
                        labels: labels,

                        datasets: [

                            {
                                label: "BASELINE1",
                                fill: false,
                                //lineTension: 0.1,
                                //backgroundColor: "rgba(255, 0, 0, 0.75)",
                                borderColor: "rgba(255, 0, 0, 1)",
                                pointHoverBackgroundColor: "rgba(255, 0, 0, 1)",
                                //pointHoverBorderColor: "rgba(255, 0, 0, 1)",
                                data: chart1
                            },
                            {
                                label: "BASELINE2",
                                fill: false,
                                //lineTension: 0.1,
                                backgroundColor: "rgba(0, 255, 0, 0.75)",
                                borderColor: "rgba(0, 255, 0, 1)",
                                pointHoverBackgroundColor: "rgba(0, 255, 0, 1)",
                                pointHoverBorderColor: "rgba(0, 255, 0, 1)",
                                data: chart2
                            },
                            {
                                label: "BASELINE3",
                                fill: false,
                                //lineTension: 0.1,
                                backgroundColor: "rgba(0, 0, 255, 0.75)",
                                borderColor: "rgba(0, 0, 255, 1)",
                                pointHoverBackgroundColor: "rgba(0, 0, 255, 1)",
                                pointHoverBorderColor: "rgba(0, 0, 255, 1)",
                                data: chart3
                            },
                            {
                                label: "Actual Spent",
                                fill: false,
                                backgroundColor: "rgba(50, 50, 50, 0.75)",
                                borderColor: "rgba(50, 50, 50, 1)",
                                pointHoverBackgroundColor: "rgba(50, 50, 50, 1)",
                                pointHoverBorderColor: "rgba(50, 50, 50, 1)",
                                data: spent
                            }

                        ]

                    };

                    var graphTarget = $("#scurve_chart");

                  var barGraph = new Chart(graphTarget, {
                        type: 'line',
                        data: chartdata,
                        options: {
                            elements: {
                    point:{
                        radius: 0,
                    }
                },


        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }],
            xAxes: [{
            barValueSpacing: 2,
            barPercentage: 0.2
        }]
        }
    }
                    });

            }}