javascript - 如何修复 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
        });

注意* 在最后一个代码段的末尾添加图例选项不起作用。

标签： javascriptjquerycharts

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>