如何正确安装/访问Javascript库

时间:2016-08-13 19:39:45

标签: javascript php html chart.js

我正在开发一个包含php页面的基本网站。我在cpanel上托管我的网站。我想将这个Javascript库(here)合并到我的项目中。我已下载项目,将源文件中的内容复制到我的项目中,并测试了他们的示例代码(here),但我的页面上没有显示任何内容。导入/实施项目就像那样简单,还是我错过了几个步骤?谢谢!

如果我滥用任何条款,我会道歉,因为我对Web开发的知识明显缺乏其他领域。谢谢!

编辑:我没有使用jquery /没有安装它;我需要添加吗?

以下代码:

 <div class="jumbotron">
    <h1> Test</h1>

    <canvas id="myChart" width="400" height="400"></canvas>
    <script type="text/javascript" src="assets/js/chart.js" charset="utf-8">
    var ctx = document.getElementById("myChart");
    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>

1 个答案:

答案 0 :(得分:-2)

你可以查看一下,因为它对我有用。您没有获得任何显示,因为您在脚本标记中包含了source属性。我所知道的是,当你在特定文档中使用脚本标记并且决定在脚本标记之间放置一些代码时,除非代码在另一个文件中,否则你不会包含src标记。希望这有帮助。

<head>
 <script type="text/javascript" src="assets/js/chart.js"></script>
</head>
<div class="jumbotron">
<h1> Test</h1>

<canvas id="myChart" width="400" height="400"></canvas>
<script type="text/javascript">
var ctx = document.getElementById("myChart").getContext("2d");
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>

enter image description here