Question

<script src="https://raw.githubusercontent.com/nnnick/Chart.js/master/dist/Chart.bundle.js"></script>

<script>
var ctx = document.getElementById("mycanvas");
var myChart = new Chart(ctx, { type: 'bar',
    data: {
        labels: ["Red","Blue","Yellow","Green","Purple","Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: ['rgba(255, 99, 132, 0.2)','rgba(54, 162, 235, 0.2)','rgba(255, 206, 86, 0.2)','rgba(75, 192, 192, 0.2)','rgba(153, 102, 255, 0.2)','rgba(255, 159, 64, 0.2)'],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});
</script>


<div class="container">

    <div class="row">

        <div class="col-md-10 col-md-offset-1">

            <div class="panel panel-default">

                <div class="panel-heading">Dashboard</div>


                <div class="panel-body">

                    <canvas id="mycanvas" height="280" width="600"></canvas>

                </div>

            </div>

        </div>

    </div>

</div>

我从这段代码中得不到任何东西它没有显示我正在使用chartjs的图表任何人告诉我，我在这里做错了我在larave 5.2上使用它如果有人建议如何在laravel 5.2上做它我真的很感激它请有人帮忙

Answer 1

截至目前，代码的执行是在DOM中加载页面内容。您需要等待DOM构建。您应该使用DOMContentLoaded事件

初始HTML文档完全加载并解析后会触发DOMContentLoaded事件，而无需等待样式表，图像和子帧完成加载。

document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM fully loaded and parsed");
    //Your code
});

此外， github 不是CDN，因此不要直接参考存储在那里的JavaScript文件。

Answer 2

https://raw.githubusercontent.com/nnnick/Chart.js/master/dist/Chart.bundle.js

发现404未找到错误。请使用您的服务器或CDN来提供此文件。

Answer 3

检查此JSFiddle

你需要使用像https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.bundle.js

这样的工作cdn

<强> HTML

<div class="container">

  <div class="row">

    <div class="col-md-10 col-md-offset-1">

      <div class="panel panel-default">

        <div class="panel-heading">Dashboard</div>


        <div class="panel-body">

          <canvas id="mycanvas" height="280" width="600"></canvas>

        </div>

      </div>

    </div>

  </div>

</div>

<强> JS

var ctx = document.getElementById("mycanvas");
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)'],
      borderColor: [
        'rgba(255,99,132,1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

Answer 4

试试这个Working Example

var ctx = document.getElementById("mycanvas");
var myChart = new Chart(ctx, { type: 'bar',
    data: {
        labels: ["Red","Blue","Yellow","Green","Purple","Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: ['rgba(255, 99, 132, 0.2)','rgba(54, 162, 235, 0.2)','rgba(255, 206, 86, 0.2)','rgba(75, 192, 192, 0.2)','rgba(153, 102, 255, 0.2)','rgba(255, 159, 64, 0.2)'],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});

<div class="container">

    <div class="row">

        <div class="col-md-10 col-md-offset-1">

            <div class="panel panel-default">

                <div class="panel-heading">Dashboard</div>


                <div class="panel-body">

                    <canvas id="mycanvas" height="280" width="600"></canvas>

                </div>

            </div>

        </div>

    </div>

</div>

这段代码没有显示图表有什么问题

4 个答案: