问题一：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. go语言入门（Hello World）
			
    package main import "fmt" func main(){ fmt.Println("Hello world") }
    
			
    2. 
						
  2. #考研笔记#计算机之PPT问题
			
    PPT1． 幻灯片母版.版式.模板之间的联系与区别?见下 12 2． 占位符的意义用于幻灯片上,就表现为一个虚框,虚框内部往往有“单击此处添加标题”之类的提示语,一旦鼠标点击之后,提示语会自动消失.当 ...
    
			
    3. 
						
  3. 01python语言程序设计基础——初识python
			
    1.python的字符串中format函数用法   format 函数可以接受不限个参数,位置可以不按顺序. In [2]: "{} {}".format("hello& ...
    
			
    4. 
						
  4. laravel的filter()方法的使用 (方法使用给定的回调函数过滤集合的内容，只留下那些通过给定真实测试的内容)
			
    filter 方法使用给定的回调函数过滤集合的内容,只留下那些通过给定真实测试的内容: $collection = collect([1, 2, 3, 4]); $filtered = $collec ...
    
			
    5. 
						
  5. 算法实践--不相交集合(Disjoint Sets)
			
    什么是不相交集合(Disjoint Sets) 是这样的一组set,任何元素最多只能在一个set中 至少支持查找Find和合并Union操作 实现方式(基于树) 每个set都是一棵树 每棵树都由树的根 ...
    
			
    6. 
						
  6. 在Release版本下使用VLD
			
    前提 同Debug版本在VC中配置好VLD的相关信息,拷贝 Visual Leak Detector\bin\Win32目录下所有的文件和vld.ini到工程目标路径下. 强制检测 在程序入口处的cp ...
    
			
    7. 
						
  7. Win7系统安装Centos7.0双系统(三)
			
    4.6语言选择 4.7安装信息设置,除以下几项改动其他都可默认. 软件选择(默认最小):带GUI的服务器或GNOME桌面,可根据使用需要选择安装软件. 磁盘分区:Linux默认可分为3个分区,分别是b ...
    
			
    8. 
						
  8. Python发送微信消息
			
    针对此 需要安装itchat第三方模块 采用pip安装就可以了   pip install itchat import itchatimport time#引入时间函数进行测试time_format= ...
    
			
    9. 
						
  9. Scrapy实战篇（二）之爬取链家网成交房源数据（下）
			
    在上一小节中,我们已经提取到了房源的具体信息,这一节中,我们主要是对提取到的数据进行后续的处理,以及进行相关的设置. 数据处理 我们这里以把数据存储到mongo数据库为例.编写pipelines.py ...
    
			
    10. 
						
  10. Error:Execution failed for task :app:transformClassesWithInstantRunForDebug解决方案
			
    转自https://blog.csdn.net/student9128/article/details/53026990
    
			
    11.