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

Answer 4

npm i chart.js

有关 Chart.js 的更多信息，请访问 https://installmd.com/i/javascript/chart-js

如何安装chart.js

4 个答案: