Chart.js使用教程，画折线图实例

第一步
准备好chart.js和excanvas.js(用于ie浏览器兼容)
下载地址：https://github.com/nnnick/Chart.js
参考文档地址：http://www.bootcss.com/p/chart.js/docs/

简单介绍下：
Chart.js 是一个简单、面向对象、为设计者和开发者准备的图表绘制工具库。
6种图表类型：曲线图、柱状图、蛛网图、极地区域图、饼图和环形图

第二步
先在html页面中引用2个js，excanvas.js可以解决它在ie7，ie8兼容性问题

<script type="text/javascript" src="Chart.js"></script><!--[if lte IE 8]><script src="excanvas.js"></script><![endif]-->

准备一个canvas

<div style="width: 50%"><canvas id="myChart" width="400" height="450"></canvas>
</div>

第三步
在创建好canvas之后，我们需要创建一个，用于设置图表上的各个参数。

<script>
//为data准备的数据
var arr2=new Array();  arr2[0]="30";arr2[1]="52";arr2[2]="45";arr2[3]="78";
arr2[4]="27";arr2[5]="88";arr2[6]="65";//用于存放图表上的数据
var lineChartData = {
//表的X轴参数
labels : ["January","February","March","April","May","June","July"],
datasets : [{fillColor : "transparent",     //背景色，常用transparent透明strokeColor : "rgba(220,220,220,1)",  //线条颜色，也可用"#ffffff"pointColor : "rgba(220,220,220,1)",   //点的填充颜色pointStrokeColor : "#fff",            //点的外边框颜色data : [65,59,32,29,46,55,40]      //点的Y轴值},{fillColor : "transparent",strokeColor : "rgba(151,187,205,1)",pointColor : "rgba(151,187,205,1)",pointStrokeColor : "#fff",data : []    //data中的参数，通过下方for循环，获取arr2中的数据}]
}for(var i = 0; i < arr2.length;i++){ lineChartData.datasets[1].data.push(arr2[i]);//将数组arr2中的值写入data}//定义图表的参数
var defaults = {    scaleStartValue :null,     // Y 轴的起始值scaleLineColor : "rgba(0,0,0,.1)",    // Y/X轴的颜色scaleLineWidth : 1,        // X,Y轴的宽度scaleShowLabels : true,    // 刻度是否显示标签, 即Y轴上是否显示文字   scaleLabel : "<%=value%>", // Y轴上的刻度,即文字  scaleFontFamily : "'Arial'",  // 字体  scaleFontSize : 20,        // 文字大小 scaleFontStyle : "normal",  // 文字样式  scaleFontColor : "#666",    // 文字颜色  scaleShowGridLines : true,   // 是否显示网格  scaleGridLineColor : "rgba(0,0,0,.05)",   // 网格颜色scaleGridLineWidth : 2,      // 网格宽度  bezierCurve : false,         // 是否使用贝塞尔曲线? 即:线条是否弯曲     pointDot : true,             // 是否显示点数  pointDotRadius : 8,          // 圆点的大小  pointDotStrokeWidth : 1,     // 圆点的笔触宽度, 即:圆点外层边框大小 datasetStroke : true,        // 数据集行程datasetStrokeWidth : 2,      // 线条的宽度, 即:数据集datasetFill : false,         // 是否填充数据集 animation : true,            // 是否执行动画  animationSteps : 60,          // 动画的时间   animationEasing : "easeOutQuart",    // 动画的特效   onAnimationComplete : null    // 动画完成时的执行函数   }window.onload = function(){var ctx = document.getElementById("myChart").getContext("2d");window.myLine = new Chart(ctx).Line(lineChartData,defaults); }</script>

当我们完成了在指定的canvas上实例化Chart对象之后，Chart.js会自动针对retina屏幕做缩放。制作一张折线图的流程就结束了,若要创建其他类型图建议去查看官网中文文档。下图为演示效果

Chart.js使用教程，画折线图实例相关推荐

python设置折线图标题字体为宋体_python中matplotlib画折线图实例（坐标轴数字、字符串混搭及标题中文显示）...
最近在用python中的matplotlib画折线图,遇到了坐标轴 "数字+刻度" 混合显示.标题中文显示.批量处理等诸多问题.通过学习解决了,来记录下.如有错误或不足之处,望请指 ...
python利用json和pyecharts画折线图实例
目录一.json模块对数据进行处理二.利用pyecharts画折线图三.利用pyecharts画美.日.印三国家折线图四.本文数据集注:本次实验的数据在文章最后面,我已上传至百度网盘一.j ...
python画折线图代码-python画折线示意图实例代码
python画折线图方法前做PPT要用到折线图,嫌弃EXCEL自带的看上去不好看,就用python写了一个画折线图的程序. import matplotlib.pyplot as plt x=[1, ...
如何使用python画折线图-Python 使用 matplotlib 画折线图教程
话不多说,直接上代码.最近修改一篇论文,实验部分的图全部重画了一下,也正好在此进行整理.使用 Python 的 matplotlib 库来画图还是比较方便的,今天整理一下用 matplotlib 画折 ...
python画折线图详解-利用python画出折线图
本文实例为大家分享了python画折线图的具体代码,供大家参考,具体内容如下 # encoding=utf-8 import matplotlib.pyplot as plt from pylab i ...
python画折线图-利用python画出折线图
本文实例为大家分享了python画折线图的具体代码,供大家参考,具体内容如下 # encoding=utf-8 import matplotlib.pyplot as plt from pylab i ...
折线图_R语言画折线图？
笔者邀请您,先思考: 1 折线图有什么作用?如何画折线图折线图(Line chart)是将数据表示为一系列称为"标记"的数据点,数据点之间由线段连接而成.它是类似散点图,除了测量 ...
echarts画折线图和数据excel导出
最近一直使用echarts画折线图,在此做个记录最后样式代码 <!DOCTYPE html> <html style="height: 100%">&l ...
python 折线图 excel_Python操作Excel，openpyxl模块，画折线图
一.如图 30万数据,比较大,挤一起了 import sys import uuid import string import json import time import random impor ...

Chart.js使用教程，画折线图实例

Chart.js使用教程，画折线图实例相关推荐

最新文章

热门文章