Question

我使用Chartjs在甜甜圈样式表中显示信息。我在页面中包含了html，Chart.js，并且图表没有显示在Chrome中。我只是希望它显示在网页上。我错过了什么吗？

<!--=== Intro ===-->
     <section class="hero bg-brand-fifth">
        <div class="col-lg-12 inner-container wow animated fadeInDown text-center">
               <h2 class="text-xl transparent-30">Our Metrics</h2><br>


                <h1>Ages of Clients Served Through our I & R Management Program<br><span>2012-2013</span></h1>

                <canvas id="hours" width="250" height="250"></canvas>

               <div class="btn-group btn-group-lg ">
                    <button class="btn  btn-outline btn-xl pull-left" type="button">
                         <i class="fa fa-envelope text-transparent"></i>
                    </button>
                    <button class="btn btn-outline btn-xl">Contact Support</button>
               </div><br>
               <a href="#" class="transparent-30">Need Help?</a>
         </div>             
        <div class="clearfix"></div>
     </section><!--=== / END intro  ===-->



    <!-- Core JavaScript Files -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>    
      <!-- Plugins -->
    <script src="js/Chart.js"></script>
    <script>
    var data = [
    {
    value: 20,
    color:"#637b85"
    },
    {
    value : 30,
    color : "#2c9c69"
    },
    {
    value : 40,
    color : "#dbba34"
    },
    {
    value : 10,
    color : "#c62f29"
    }

    ];
    var hours = new Chart(document.getElementById("hours").getContext("2d")).Doughnut(data, options);

    </script>
    <!--<script src="js/main.js"></script>-->
        <script src="plugins/WOW-master/dist/wow.js"></script>
    <script>
        new WOW().init();
    </script>
        <script src="js/modernizr.js"></script>
    <script src="js/easing.min.js"></script>
    <!-- Custom JavaScript -->
    <script src="js/act-subpages.js"></script>

</body>

Answer 1

未定义参数选项！

试试这段代码

 var hours = new Chart(document.getElementById("hours").getContext("2d")).Doughnut(data);

或此代码更清晰

 // Get the context of the canvas element we want to select
        var ctx = document.getElementById("hours").getContext("2d");
        var myNewChart = new Chart(ctx).Doughnut(data);

Chartjs没有渲染

1 个答案: