如何安装chart.js

Question

我知道这是一个非常愚蠢的问题，但是如何安装chartjs以在项目中使用我查看了文档并且没有说是或如何安装它，我从GitHub下载了它，我正在使用xampp。谢谢

Answer 1

如果我理解正确，您希望完全使用 ChartJS。您从 Github 下载的包包含一个名为Dist的文件夹，其中存放分发文件。

在里面你会发现 4 个文件。两个是“捆绑包”，其中包括用于时间尺度的 Moment.JS。其他两个没有。最后，2 个被缩小，其他没有。

基本上，要“安装”ChartJS，您需要做的就是确保在您的安装中引用它。为简单起见，这里是 ChartJS v2.5 的 CDN 链接：

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>

将其包含在页面的标题中，您现在可以使用 ChartJS。

我们现在要做的就是渲染一个图表：

<canvas id="myChart" width="400" height="400"></canvas>

最后，启动图表。这是文档开头的示例代码：

<script>
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>

您的页面现在应该呈现一个条形图！