Charts.js 饼图

Question

我无法在此 Bootstrap 管理主题中加载饼图（右上角）。

在我添加信息 'Panel' 或任何其他非 charts.js 面板之前它加载正常，然后它将不再加载。

我在下面的 link 上传了文件，还包括下面的 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 -->

Answer 1

查看检查器。您会看到您在 line 293 of charts-chartjs.js 上抛出错误。

[Error] TypeError: null is not an object (evaluating 'document.getElementById("bar-chartjs").getContext')

您的饼图代码在此之后，因此饼图代码不是运行。

编辑 - 添加用于检查元素是否存在的代码。 getElementById returns 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'",
    });
}

Charts.js 饼图

Charts.js Pie Chart

html

twitter-bootstrap

chart.js