Charts.js派图
Charts.js派图
提问于 2015-04-24 22:49:23
我不能让派图(右上)在这个引导管理主题加载。
它确实很好地加载，直到我添加信息‘面板’或任何其他非charts.js面板，然后它将不再加载。
我上传的文件在下面的链接，但也包括页下的html。
http://econics.liift.io/Admin/charts-chartjs.html
<!-- .page-content -->
<div class="page-content sidebar-page right-sidebar-page clearfix">
<!-- .page-content-wrapper -->
<div class="page-content-wrapper">
<div class="page-content-inner">
<!-- Start .page-content-inner -->
<div id="page-header" class="clearfix">
<div class="page-header">
<h2>Chartjs</h2>
<span class="txt">Nice chart plugin.</span>
</div>
<div class="header-stats">
<div class="spark clearfix">
<div class="spark-info">
<span class="number">2345</span>Visitors
</div>
<div id="spark-visitors" class="sparkline"></div>
</div>
<div class="spark clearfix">
<div class="spark-info">
<span class="number">17345</span>Views
</div>
<div id="spark-templateviews" class="sparkline"></div>
</div>
<div class="spark clearfix">
<div class="spark-info">
<span class="number">3700$</span>Sales
</div>
<div id="spark-sales" class="sparkline"></div>
</div>
</div>
</div>
<!-- Start .row -->
<div class="row">
<div class="col-lg-6">
<!-- col-lg-6 start here -->
<div class="panel panel-default toggle panelMove panelClose panelRefresh">
<!-- Start .panel -->
<div class="panel-heading">
<h4 class="panel-title">Line chart with Dots</h4>
</div>
<div class="panel-body">
<div class="canvas-holder">
<canvas id="line-dots-chartjs" height="200"></canvas>
</div>
</div>
</div>
<!-- End .panel -->
<div class="panel panel-default toggle panelMove panelClose panelRefresh">
<!-- Start .panel -->
<div class="panel-heading">
<h4 class="panel-title">Line chart unfilled<small>and curved</small></h4>
</div>
<div class="panel-body">
<div class="canvas-holder">
<canvas id="line-unfilled-chartjs" height="100"></canvas>
</div>
</div>
</div>
<!-- End .panel -->
<div class="panel panel-default toggle panelMove panelClose panelRefresh">
<!-- Start .panel -->
<div class="panel-heading">
<h4 class="panel-title">Line chart</h4>
</div>
<div class="panel-body">
<div class="canvas-holder">
<canvas id="line-chartjs" height="100"></canvas>
</div>
</div>
</div>
<!-- End .panel -->
</div>
<!-- col-lg-6 end here -->
<div class="col-lg-6">
<!-- col-lg-6 start here -->
<div class="panel panel-default toggle panelMove panelClose panelRefresh">
<!-- Start .panel -->
<div class="panel-heading">
<h4 class="panel-title">Pie Chart</h4>
</div>
<div class="panel-body">
<div class="canvas-holder">
<canvas id="pie-chartjs" height="100"></canvas>
</div>
</div>
</div>
<!-- End .panel -->
<div class="panel panel-default toggle panelMove panelClose panelRefresh">
<!-- Start .panel -->
<div class="panel-heading">
<h4 class="panel-title">Information</h4>
</div>
<div class="panel-body">
<div class="canvas-holder">
<div class="panel-body">
<h1>This is an H1 heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<h2>This is an H2 heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<h3>This is an H3 heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<h4>This is an H4 heading</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<h5>This is an H5 heading</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<h6>This is an H6 heading</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</div>
<!-- End .panel -->
</div>
<!-- col-lg-6 end here -->
</div>
<!-- End .row -->
</div>
<!-- End .page-content-inner -->
</div>
<!-- / page-content-wrapper -->
</div>
<!-- / page-content -->
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-04-24 22:57:35
去查查督察。您将看到您正在图表的line 293上抛出一个错误-chartjs.js。
[Error] TypeError: null is not an object (evaluating 'document.getElementById("bar-chartjs").getContext')
饼图的代码是在此之后出现的，所以饼图代码不会运行。
编辑-添加用于检查元素是否存在的代码。如果元素不存在，getElementById返回null。因此，您可以用一个简单的if语句包装图表的创建：
var bar = document.getElementById("bar-chartjs");
var ctxBar;
if (bar) {
ctxBar = bar.getContext("2d");
myBar = new Chart(ctxBar).Bar(barChartData, {
responsive : true,
scaleShowGridLines : true,
scaleGridLineColor : "#bfbfbf",
scaleGridLineWidth : 0.2,
//bar options
barShowStroke : true,
barStrokeWidth : 2,
barValueSpacing : 5,
barDatasetSpacing : 2,
//animations
animation: true,
animationSteps: 60,
animationEasing: "easeOutQuart",
//scale
showScale: true,
scaleFontFamily: "'Roboto'",
scaleFontSize: 13,
scaleFontStyle: "normal",
scaleFontColor: "#333",
scaleBeginAtZero : true,
//tooltips
showTooltips: true,
tooltipFillColor: "#344154",
tooltipFontFamily: "'Roboto'",
tooltipFontSize: 13,
tooltipFontColor: "#fff",
tooltipYPadding: 8,
tooltipXPadding: 10,
tooltipCornerRadius: 2,
tooltipTitleFontFamily: "'Roboto'",
});
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29858782
复制相关文章
相似问题
腾讯云开发者
