Как исправить ChartJS легенда не рабочая проблема

Question

Я использую chartjs для своего проекта, и все мои графики работают без легенд.проблема не в том, что я делаю, легенда не появляется.вот мой код.

var ctx1 = document.getElementById("chart1").getContext("2d");
        var data1 = {
            labels: ["2018-11-05","2018-11-06","2018-11-07","2018-11-08","2018-11-09","2018-11-10","2018-11-11","2018-11-12","2018-11-13","2018-11-14"],
            datasets: [
                {
                    label: "Total Calls received",
                    fillColor: "rgba(220,220,220,0)",
                    strokeColor: "rgba(220,220,220,1)",
                    pointColor: "rgba(220,220,220,1)",
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(18,175,203,1)",
                    data: [0,"2539","8091","9119","15621","13293","6892","6486","6605","931"]                },
                {
                    label: "Total Calls Accepted",
                    fillColor: "rgba(34,186,160,0)",
                    strokeColor: "rgba(34,186,160,1)",
                    pointColor: "rgba(34,186,160,1)",
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(75,131,13,1)",
                    data: [0,"274","1443","1069","377","22","1268","1201","1356","236"]                },
                {
                    label: "Eligible For Offers",
                    fillColor: "rgba(41,121,255,0)",
                    strokeColor: "rgba(41,121,255,1)",
                    pointColor: "rgba(41,121,255,1)",
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(0,78,203,1)",
                    data: [0,0,0,"2854","5573","6846","3270","3007","3413","649"]                }
            ]
        };

        var chart1 = new Chart(ctx1).Line(data1, {
            scaleShowGridLines: true,
            scaleGridLineColor: "rgba(0,0,0,.05)",
            scaleGridLineWidth: 1,
            scaleShowHorizontalLines: true,
            scaleShowVerticalLines: true,
            bezierCurve: true,
            bezierCurveTension: 0.4,
            pointDot: true,
            pointDotRadius: 4,
            pointDotStrokeWidth: 1,
            pointHitDetectionRadius: 20,
            datasetStroke: true,
            datasetStrokeWidth: 2,
            datasetFill: true,
            responsive: true
        });

Примечание * добавление опции легенды в конец последнего сегмента кода не работает.

Answer 1

попробуйте это ...

var ctx1 = document.getElementById("chart1").getContext("2d");
        var data1 = {
            labels: ["2018-11-05","2018-11-06","2018-11-07","2018-11-08","2018-11-09","2018-11-10","2018-11-11","2018-11-12","2018-11-13","2018-11-14"],
            datasets: [
                {
                    label: "Total Calls received",
                    fillColor: "rgba(220,220,220,0)",
                    strokeColor: "rgba(220,220,220,1)",
                    pointColor: "rgba(220,220,220,1)",
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(18,175,203,1)",
                    data: [0,"2539","8091","9119","15621","13293","6892","6486","6605","931"]                },
                {
                    label: "Total Calls Accepted",
                    fillColor: "rgba(34,186,160,0)",
                    strokeColor: "rgba(34,186,160,1)",
                    pointColor: "rgba(34,186,160,1)",
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(75,131,13,1)",
                    data: [0,"274","1443","1069","377","22","1268","1201","1356","236"]                },
                {
                    label: "Eligible For Offers",
                    fillColor: "rgba(41,121,255,0)",
                    strokeColor: "rgba(41,121,255,1)",
                    pointColor: "rgba(41,121,255,1)",
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(0,78,203,1)",
                    data: [0,0,0,"2854","5573","6846","3270","3007","3413","649"]                }
            ]
        };

        var chart1 = new Chart(ctx1).Line(data1, {
            scaleShowGridLines: true,
            scaleGridLineColor: "rgba(0,0,0,.05)",
            scaleGridLineWidth: 1,
            scaleShowHorizontalLines: true,
            scaleShowVerticalLines: true,
            bezierCurve: true,
            bezierCurveTension: 0.4,
            pointDot: true,
            pointDotRadius: 4,
            pointDotStrokeWidth: 1,
            pointHitDetectionRadius: 20,
            datasetStroke: true,
            datasetStrokeWidth: 2,
            datasetFill: true,
            responsive: true
        });

document.getElementById('legends').innerHTML = chart1.generateLegend();

.chart-legend li span {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1/Chart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width: 100%; height: 100%;">
  <canvas id="chart1" style="width: 100%; height: auto;"></canvas>
</div>
<div id="legends" class="chart-legend"></div>