如何修复 ChartJS 图例不起作用的问题

Posted 2023-02-16

【中文标题】如何修复 ChartJS 图例不起作用的问题

【英文标题】：How to fix ChartJS legend not working issue

【发布时间】：2019-04-17 00:23:40

【问题描述】：

我正在为我的项目使用 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
        );

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

【问题讨论】：

你能做一个小提琴吗？

【参考方案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>