问题一：chart.js的版本问题：打开官网https://github.com/chartjs/Chart.js/releases/tag/v2.7.3，点击Tags，选择最新版本，我这里选用的是V2.7.3，下载对应的ZIP文件，下载好后，解压缩，打开dist文件夹，找　　　　               到对应的chart.js文件，复制到自己的开发路径下，使用<script src="Chart.js"></script>其中路径添加自己的chart.js路径，我这里是拷贝到了当前路径下面，到此就相当于引入了外部的chart.js的插件了。

问题二：自从引入了chart.js文件，使用new Chart(ctx, config);会产生canvas画布的页面大小无法控制的情况发生，解决办法：用一个 div元素将canvas画布包围起来，指定div元素的大小，而不是指定canvas元素　　　　　　　　　　           的大小，如：

　　<div id="canvas-holder" style="width:40%">
    　　<canvas id="chart-area"></canvas>
　　</div>

问题三：data部分或者说是config部分，这里的数据最好还是在问题一中下载的文件中打开samples文件夹下的chart文件夹，找到对应的案例，分析config的数据部分

饼状图实例源码及效果图：

<!doctype html>
<html>

<head>
    <title>Pie Chart</title>
    <script src="Chart.js"></script>
</head>

<body>
<div id="canvas-holder" style="width:40%">
    <canvas id="chart-area"></canvas>
</div>

<script>
    var randomScalingFactor = function() {
        return Math.round(Math.random() * 100);
    };

    var config = {
        type: 'pie',
        data: {
            datasets: [{
                data: [
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor(),
                ],
                backgroundColor: [
                    "red",
                    "orange",
                    "yellow",
                    "green",
                    "blue",
                ],
                label: 'Dataset 1'
            }],
            labels: [
                'Red',
                'Orange',
                'Yellow',
                'Green',
                'Blue'
            ]
        },
        options: {
            responsive: true
        }
    };

    window.onload = function() {
        var ctx = document.getElementById('chart-area').getContext('2d');
        window.myPie = new Chart(ctx, config);
    };
</script>
</body>
</html>
效果图如图所示：

参考博客：https://www.cnblogs.com/dealblog/p/7106935.html

												


											
chart.js应用中遇到的问题的更多相关文章
	

    
								
  1. chart.js使用常见问题
		
    Chart.js是一个简单.面向对象.为设计者和开发者准备的图表绘制工具库. 在使用过程中新手可能会遇到很多问题导致图标无法显示.下面我们来看一下在使用过程中可能会遇到的问题. 刚开始用chart.j ...
    
		
    2. 
						
  2. Chart.js中文文档-雷达图
		
    雷达图或蛛网图(Radar chart) 简介 A radar chart is a way of showing multiple data points and the variation bet ...
    
		
    3. 
						
  3. Ionic中使用Chart.js进行图表展示以及在iOS/Android中的性能差异
		
    Angular Chart 简介 在之前的文章中介绍了使用 Ionic 开发跨平台(iOS & Android)应用中遇到的一些问题的解决方案. 在更新0.1.3版本的过程中遇到了需要使用图表 ...
    
		
    4. 
						
  4. chart.js在html中画曲线图
		
    http://www.bootcss.com/p/chart.js/docs/ http://www.chartjs.org/docs/   中有详细讲解 一.简介 Chart.js是一个基于HTML ...
    
		
    5. 
						
  5. vue中使用chart.js
		
    1,安装chart.js和vue-chart.js npm install chart.js --save npm install vue-chart.js --save 2,独立文件,方便修改 封装 ...
    
		
    6. 
						
  6. angulajs中引用chart.js做报表,修改线条样式
		
    目前还有个问题,在手机上看,当折线y轴值超过1000,会有点问题 1.下载chart js,可以用bower 命令下载 http://www.chartjs.org/docs/#line-chart- ...
    
		
    7. 
						
  7. 关于chart.js 设置canvas的宽度为父级元素的宽度的百分百 以及 X轴上面刻度数据太多如何处理
		
    今天在做一个数据统计的界面的时候,需要做折线统计图,在网上找了一圈发现数据统计的插件还是不少的,本着轻量级的的原则选择了Chart.js,后来在做的过程中便遇到两个问题,以此记录下来,和刚刚接触前端的 ...
    
		
    8. 
						
  8. JS组件系列——开源免费图表组件：Chart.js
		
    前言:最近被开源免费得有点上火了,各种组件首先想到的就是是开源否.是否免费.是否和bootstrap风格一致.想着以后做报表肯定要用到图表组件的,于是在Bootstrap中文网上面找到了Chart.j ...
    
		
    9. 
						
  9. 数据可视化(1)--Chart.js
		
    Chart.js是一个HTML5图表库,使用canvas元素来展示各式各样的客户端图表,支持折线图.柱形图.雷达图.饼图.环形图等.在每种图表中,还包含了大量的自定义选项,包括动画展示形式. Char ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Python全栈之路----递归
			
    alex博客中递归的博文     我之前确实没讲明白递归这个东西 递归就是在函数的运行过程中调用自己. 但递归不断调用自己是有限度的,默认限度为1000.函数不断被压进栈,当超过递归限度时会造成栈溢出 ...
    
			
    2. 
						
  2. a small notepad++ plugin to support doxygen 1key generate
			
    Precondition: doxygen in c:\ folder testdoxygen.bat --- path %path%;C:\Doxygen;C:\Doxygen\graphviz\b ...
    
			
    3. 
						
  3. linux查看进程启动的时间点
			
    ps -ef |grep xxx  # 先查找进程pid ps -wo pid,lstart -p {pid}
    
			
    4. 
						
  4. Python3 字典 setdefault() 方法
			
    Python 字典 setdefault() 函数和get() 方法类似, 如果键不存在于字典中,将会添加键并将值设为默认值. dict.setdefault(key, default=None) k ...
    
			
    5. 
						
  5. 0003 - 基于xml的Spring Bean 的创建过程
			
    一.目录 前言 创建 Bean 容器 加载 Bean 定义 创建 Bean Spring Bean 创建过程中的设计模式 总结 二.前言 2.1 Spring 使用配置 ApplicationCont ...
    
			
    6. 
						
  6. mysql高性能6章总结（下） mysql查询优化
			
    6.5查询优化器的局限性 mysql优化器是有局限性的,有时需要我们改写查询以提高效率. 6.5.1关联子查询 子查询是mysql一个很不效率的地方. 这一节首先我们需要了解一下相关子查询:内外部查询 ...
    
			
    7. 
						
  7. 安卓打开远程调试(免root)
			
    首先用数据线连接adb,在pc端执行: adb tcpip 5555 然后就能拔掉数据线了. pc执行这个: adb connect 172.19.208.2 就能连接上
    
			
    8. 
						
  8. 竖直的ViewPager，上下滑动的ViewPager，VerticalViewPager ；
			
    直接看代码吧,重写Viewpager,改变了手势和切换效果:和正常的Viewpager使用一模一样: /** * ChenboCui 竖向的Viewpager */ public class Vert ...
    
			
    9. 
						
  9. 关于报错：There is already 'xxxController' bean method的解决方法
			
    报这个错的原因是因为你controller里的@RequestMapping中的路径有重复! 如:
    
			
    10. 
						
  10. day32基于tcp协议的远程执行命令
			
    客户端 from socket import *import structimport json client = socket(AF_INET, SOCK_STREAM)client.connect ...
    
			
    11.