我知道这是一个非常愚蠢的问题,而是如何安装chartjs到项目中的香港专业教育学院看着文档使用,它dosent说是或如何安装它,我从GitHub下载了它,我正在使用xampp。感谢如何安装chart.js之
-1
A
回答
0
入住这
...
<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>
0
如果我理解正确的,你看干脆用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>
您的页面现在应该呈现条形图!
相关问题
- 1. 如何创建与chart.js之
- 2. 如何使用chart.js之
- 3. 如何在没有库的情况下安装Chart.js?
- 4. chart.js之饼图
- 5. chart.js之用JSON
- 6. 如何获得点击chart.js之
- 7. 如何自定义上chart.js之
- 8. 如何注入“chart.js之”我的模块?
- 9. 如何缩短chart.js之标签
- 10. 如何嵌入chart.js之在角种子
- 11. 如何画基线在chart.js之
- 12. 如何安装pygame? (之前从未安装额外的模块)
- 13. chart.js之jQuery插件
- 14. 可以从chart.js之
- 15. 问题用chart.js之
- 16. 就chart.js之线图
- 17. 如何安装
- 18. chart.js之2 - 轴层填充
- 19. chart.js之在角雷达图
- 20. chart.js之流星不拉丝
- 21. chart.js之多个数据集
- 22. 水平在角chart.js之
- 23. chart.js之 - 绘制水平线
- 24. 添加阴影chart.js之
- 25. chart.js之使用JSON数据
- 26. chart.js之 - 无法读取空
- 27. chart.js之帆布Y轴
- 28. chart.js之 - tooltiptemplate在饼图
- 29. 删除chart.js之图填充
- 30. 文本里面吧 - chart.js之
或者如果你想安装到npm这个链接将帮助你 https://www.npmjs.com/package/angular-chartjs –