如何安装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>

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

Answer 2

检查一下

...

  <script>  


    javascript 

    angular.module("app", ["chart.js"])
      // Optional configuration
      .config(['ChartJsProvider', function (ChartJsProvider) {
        // Configure all charts
        ChartJsProvider.setOptions({
          chartColors: ['#FF5252', '#FF8A80'],
          responsive: false
        });
        // Configure all line charts
        ChartJsProvider.setOptions('line', {
          showLines: false
        });
      }])
      .controller("LineCtrl", ['$scope', '$timeout', function ($scope, $timeout) {

      $scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
      $scope.series = ['Series A', 'Series B'];
      $scope.data = [
        [65, 59, 80, 81, 56, 55, 40],
        [28, 48, 40, 19, 86, 27, 90]
      ];
      $scope.onClick = function (points, evt) {
        console.log(points, evt);
      };

      // Simulate async data update
      $timeout(function () {
        $scope.data = [
          [28, 48, 40, 19, 86, 27, 90],
          [65, 59, 80, 81, 56, 55, 40]
        ];
      }, 3000);
    }]);
</script>

 </html>

Answer 3

键入角度CLI - npm install --save chart.js