Javascript 饼图图例未显示-未捕获类型错误：无法设置属性'；innerHTML'；空的_Javascript_Jquery_Legend_Pie Chart

Javascript 饼图图例未显示-未捕获类型错误：无法设置属性'；innerHTML'；空的

javascript jquery

Javascript 饼图图例未显示-未捕获类型错误：无法设置属性'；innerHTML'；空的,javascript,jquery,legend,pie-chart,Javascript,Jquery,Legend,Pie Chart,我必须为饼图显示图例。我一直在下面的链接但在下面的代码中它对我不起作用 <!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title>ChartJS - Pie Chart</title> <link href = "https://code.jquery.com/ui/1.10.4/themes/

我必须为饼图显示图例。我一直在下面的链接

但在下面的代码中它对我不起作用

    <!DOCTYPE html>
<html>
    <head>
    <meta charset = "utf-8">
        <title>ChartJS - Pie Chart</title>


      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
        <script src="jquery-2.1.4.min.js"></script>
        <script src="Chart.js"></script>

        <script src="veeva-library.js" type="text/javascript"></script>
        <link rel="stylesheet" href="styles.css">
        <script src="veevaMessages.js" type="text/javascript"></script>     
        <script src="jquery-ui-1.11.4/external/jquery/jquery.js"></script>
        <script src="jquery-ui-1.11.4/jquery-ui.min.js"></script>
        <script src="MyInsightsLibrary.js"></script>
    </head>
    <body onload="init()">
    <span style="float: left;margin-left:2em"> <b>Date Range: </b>
        <input type="text" id="datepicker" > <b>to </b>
        <input type="text" id="datepicker2"> </span><div id = "Alert" style="float:left;margin-left:2em"> Please select a valid Date Range!</div>
       <div style="width: 100%; height: 100%;"> 
        <canvas id="mycanvas" style="width: 100%; height: auto;"></canvas>  <!--width="300" height="300">-->
       </div>
        <div id="js-legend" style="display: inline-block;width: 12px; height: 12px; margin-right: 5px;"></div>    <!-- class="chart-legend"  -->
      </body>  
        <script>


var startDate;
    var endDate;
    var start;
    var end;

        $(function() {
            $("#datepicker").datepicker({
                onSelect: function() {
                    startDate = $(this).datepicker('getDate');
                    start = formatDate(startDate);
                    if( start!=null && end!=null && end>=start)
                    {document.getElementById('Alert').style.visibility = 'hidden';

                    init();

                    }
                    else {
                    document.getElementById('Alert').style.visibility = 'visible'; //Will show
                    }
                }

            });
            $("#datepicker2").datepicker({
                onSelect: function() {
                    endDate = $(this).datepicker('getDate');
                    end = formatDate(endDate);
                    alert('skn here s' + startDate);
                    alert('skn here e' + endDate);
                    if( start!=null && end!=null && end>=start)
                    {document.getElementById('Alert').style.visibility = 'hidden';
                    init();
                    }



        else {
                        document.getElementById('Alert').style.visibility = 'visible'; //Will show
                              }
                    }

                });

            });




                function init(){


                            var dynamicColors = function() {
        var r = Math.floor(Math.random() * 255);
        var g = Math.floor(Math.random() * 255);
        var b = Math.floor(Math.random() * 255);
        return "rgb(" + r + "," + g + "," + b + ")";
    }
                    var data = [
                        {
                            value: 270,
                            color: dynamicColors(),  //"cornflowerblue",
                            highlight: dynamicColors(), //"lightskyblue",
                            label: "Corn Flower Blue"
                        },
                        {
                            value: 50,
                            color: dynamicColors(), //"lightgreen",
                            highlight: dynamicColors(), //"yellowgreen",
                            label: "Lightgreen"
                        },
                        {
                            value: 40,
                            color: dynamicColors(), //"orange",
                            highlight: dynamicColors(),//"darkorange",
                            label: "Orange"
                        }
                    ];




    var options = {
        segmentShowStroke: false,
        animateRotate: true,
        animateScale: false,
        percentageInnerCutout: 50,
        tooltipTemplate: "<%= value %>n"
    };
                    var ctx = document.getElementById("mycanvas").getContext("2d");
                    //draw
                    var mycanvas = new Chart(ctx).Pie(data,options);
                    document.getElementById('js-legend').innerHTML = mycanvas.generateLegend();

                    }



            </script>

    </html>

有人能告诉我哪里出了问题吗

请查找图例在没有矩形颜色框的情况下为我显示的屏幕截图

jQuery找不到您的div

#js_legend

，因为您没有在HTML中正确编写它。应该是这样的：

<div id="js-legend" style="display: inline-block;width: 12px; height: 12px; margin-right: 5px;"></div>

这在jQuery中是一种糟糕的做法，它会打乱脚本的流程，甚至可能导致出现故障

$("#js-legend").html(mycanvas.generateLegend());

要更改元素的可见性属性，需要使用jQuery函数。另外，您应该使用以下语法，而不是像在传统JavaScript中那样调用

.style.visibility

$("#Alert").css("visibility", "hidden");

谢谢，我已经修改了它，但是请找出在小提琴链接中所期望的传奇不会发生在我身上。
document.getElementById('js-legend').innerHTML = mycanvas.generateLegend();

$("#js-legend").html(mycanvas.generateLegend());

$("#Alert").css("visibility", "hidden");