如何安装chart.js之

Question

我知道这是一个非常愚蠢的问题，而是如何安装chartjs到项目中的香港专业教育学院看着文档使用，它dosent说是或如何安装它，我从GitHub下载了它，我正在使用xampp。感谢

Answer 1

入住这

...

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

如果我理解正确的，你看干脆用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> 

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