饼图图例未显示 - 未捕获的类型错误：无法将属性“innerHTML”设置为 null
Posted
技术标签:
【中文标题】饼图图例未显示 - 未捕获的类型错误：无法将属性“innerHTML”设置为 null【英文标题】：Pie chart legend not showing - Uncaught TypeError: Cannot set property 'innerHTML' of null 【发布时间】：2018-06-07 17:30:05 【问题描述】：我必须显示饼图的图例。我一直在关注下面的链接。
http://jsfiddle.net/vrwjfg9z/
但在下面的代码中它对我不起作用。
<!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> <!-- >-->
</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>
我在控制台中遇到以下错误。我确实从谷歌搜索中了解到，它需要在某个地方放置 document.ready 或一些我不确定的 onload 功能。 错误
Uncaught TypeError: Cannot set property 'innerHTML' of null
at init & at onload
谁能告诉我哪里出错了？
请找到没有矩形颜色框的图例如何为我显示的屏幕截图。
enter image description here
【问题讨论】：
</div div 不是这样开始的
【参考方案1】：
jQuery 没有找到您的 div #js_legend，因为您没有在 HTML 中正确编写它。应该是这样的：
<div id="js-legend" style="display: inline-block;width: 12px; height: 12px; margin-right: 5px;"></div>
而不是这个：
</div id="js-legend" style="display: inline-block;width: 12px; height: 12px; margin-right: 5px;"></div>
我注意到的另一件事是，为什么在使用 jQuery 时使用传统的 JavaScript document.getElementsById()？你应该使用 $ 操作符，就像你应该做的那样。我注意到你有这条线。
document.getElementById('js-legend').innerHTML = mycanvas.generateLegend();
这在 jQuery 中是一种不好的做法，它会破坏脚本的流程，甚至可能导致故障。
$("#js-legend").html(mycanvas.generateLegend());
要更改元素的可见性属性，您需要使用 jQuery .css() 函数。此外，have a look at this question. 您应该使用以下语法，而不是像在传统 JavaScript 中那样调用 .style.visibility。
$("#Alert").css("visibility", "hidden");
【讨论】：
谢谢，我已经修改了它，但请找出我没有在小提琴链接中出现的传说方式。以上是关于饼图图例未显示 - 未捕获的类型错误：无法将属性“innerHTML”设置为 null的主要内容，如果未能解决你的问题，请参考以下文章
datatables jquery - 未捕获的类型错误：无法读取未定义的属性“显示”
jstree：未捕获的类型错误：无法读取未定义的属性“孩子”