chart.js mysql_基于html5 canvas 的强大图表插件【Chart.js】

名词解释

Chart.js：是基于html5和canvas的强大图表插件，支持多样的图表形式，柱状线性饼环极地雷达等等；

canvas：只兼容到IE9

excanvas.js：强大的第三方兼容插件，可以使canvas兼容到IE5

链接

代码实现

第三方引入

css

html,body,h1,h2,h3,h4,h5,h6 {

margin: 0;

padding: 0;

}

.container {

max-width: 1020px;

margin: 0px auto;

margin-bottom: 80px;

}

.chart-wrapper {

background: #fff;

padding: 15px;

max-width: 1020px;

margin: 0px auto 0px auto;

box-sizing: border-box;

overflow: auto;

/*在手机，支持图表区域的滚动 -webkit-overflow-scrolling: touch*/

overflow-scrolling: touch;

-webkit-overflow-scrolling: touch;

}

h2 {

margin: 20px 0px;

}

.chart-wrapper canvas {

min-width: 100%;

height: 260px;

}

.chart-title,

.chart-wrapper + small {

margin-left: 15px;

}

html

某品牌汽车销量走势

单位：万辆

某品牌汽车销量走势

单位：万辆

js

function lineChart() {

var ctx = document.getElementById('sales-volume-chart').getContext("2d")

var data = {

labels: ["2014-10", "2014-11", "2014-12", "2015-1", "2015-2", "2015-3"],

datasets: [{

label: "",

fillColor: "rgba(220,220,220,0.2)",

strokeColor: "rgba(0,102,51,1)",

pointColor: "rgba(220,220,220,1)",

pointStrokeColor: "#339933",

pointHighlightFill: "#339933",

pointHighlightStroke: "rgba(220,220,220,1)",

data: [1.27, 1.30, 1.30, 1.41, 1.04, 1.29]

}]

};

// var salesVolumeChart = new Chart(ctx).Line(data);

var salesVolumeChart = new Chart(ctx).Line(data, {

// 小提示的圆角

// tooltipCornerRadius: 0,

// 折线的曲线过渡，0是直线，默认0.4是曲线

bezierCurveTension: 0,

// bezierCurveTension: 0.4,

// 关闭曲线功能

bezierCurve: false,

// 背景表格显示

// scaleShowGridLines : false,

// 点击的小提示

tooltipTemplate: " 销量：万辆",

//自定义背景小方格、y轴每个格子的单位、起始坐标

scaleOverride: true,

scaleSteps: 9.5,

// scaleStepWidth: Math.ceil(Math.max.apply(null,data.datasets[0].data) / 0.1),

scaleStepWidth: 0.05,

scaleStartValue: 1

});

}

function barChart() {

var ctx = document.getElementById('sales-volume-bar-chart').getContext("2d")

var data = {

labels: ["2014-10", "2014-11", "2014-12", "2015-1", "2015-2", "2015-3"],

datasets: [{

label: "",

fillColor: "rgba(153,204,153,0.5)",

strokeColor: "rgba(0,102,51,1)",

pointColor: "rgba(220,220,220,1)",

pointStrokeColor: "#338033",

pointHighlightFill: "#338033",

pointHighlightStroke: "rgba(220,220,220,1)",

data: [1.27, 1.30, 1.30, 1.41, 1.04, 1.29]

}]

};

var salesVolumeChart = new Chart(ctx).Bar(data, {

// 点击的小提示

tooltipTemplate: " 销量：万辆"

});

}

// 启动

setTimeout(function() {

// 避免IE7-8 调用getContext报错，使用setTimeout

lineChart()

barChart()

}, 0)

// 在手机测试，canvas中的动画看起来很卡，性能很差

// PC上还不错

if (/Mobile/i.test(navigator.userAgent)) {

//针对手机，性能做一些降级，看起来就不会那么卡了

Chart.defaults.global.animationSteps = Chart.defaults.global.animationSteps / 6

Chart.defaults.global.animationEasing = "linear"

}

其他

html5 canvas做的图表插件

用highchart的时候发现它是用svg来画图的,那么用canvas来做怎么样的. 以前做AS图表插件的时候,绘制图画主要用容器的Graphics对象来绘制,而canvas的context和Grap ...

基于HTML5 Canvas的线性区域图表教程

之前我们看到过很多用jQuery实现的网页图表,有些还是比较实用的.今天我们来介绍一款基于HTML5 Canvas的线性区域图表应用,这个图表应用允许你使用多组数据来同时展示,并且将数据结果以线性图的 ...

基于html5 Canvas图表库 : ECharts

ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算.数据视图.值 ...

超酷HTML5 Canvas图表应用Chart.js自定义提示折线图

超酷HTML5 Canvas图表应用Chart.js自定义提示折线图 效果预览 实例代码

基于html5 canvas 的客户端异步上传图片的插件，支持客户端压缩图片尺寸

/** * Created by xx on 15-05-28. * 基于html5 canvas 的客户端异步上传画片的插件 * 在实际应用中,常常要用于上传图片的功能．在现在越来越多的手机weba ...

基于HTML5 Canvas的网页画板实现教程

HTML5的功能非常强大,尤其是Canvas的应用更加广泛,Canvas画布上面不仅可以绘制任意的图形,而且可以实现多种多样的动画,甚至是一些交互式的应用,比如网页网版.这次我们要来看的就是一款基于H ...

基于 HTML5 Canvas 的智能安防 SCADA 巡逻模块

基于 HTML5 Canvas 的智能安防 SCADA 巡逻模块 前言 最近学习了 HT for Web flow 插件,除了正常的 flow 效果,其中还有两个十分好用的两个接口 getPercen ...

一款基于HTML5 Canvas的画板涂鸦动画

今天给各网友分享一款基于HTML5 Canvas的画板涂鸦动画.记得之前我们分享过一款HTML5 Canvas画板工具,可以切换不同的笔刷,功能十分强大.本文今天要再来分享一款基于HTML5 Canv ...

基于HTML5 Canvas和jQuery 的绘图工具的实现

简单介绍 HTML5 提供了强大的Canvas元素.使用Canvas并结合Javascript 能够实现一些很强大的功能.本文就介绍一下基于HTML5 Canvas 的绘图工具的实现.废话少说,先看成 ...

随机推荐

VS对路径的访问被拒绝

问题:权限问题. 1.检查自己电脑账户.是否是Administrator.如果没有启用.在[我的电脑]——[管理]——[本地用户和组]——[用户]——[Administrator]——[属性启用] 2 ...

Simple Arithmetics

def Add(a, b): l = [] alen = len(a) blen = len(b) result = str(int(a) + int(b)) relen = len(result) ...

CPU affinity 进程和线程的亲缘性

设置Processor Affinity 作用: 1.进程和线程的亲缘性(affinity),使进程或线程在指定的CPU(核)上运行.(比如程序A,在第4个核心上运行) 2.设置进程 或者 线程, 使 ...

HTML编辑模式下制作表格

前面有朋友问如何做图文并茂的音乐帖子,的确音乐能以表格式做出来,更能让人过目不忘,何况帖子制作过程本身就是创作,包含了制作人对音乐的理解和爱好.以下简单介绍用代码HTML制作表格,希望对大家有所帮助. ...

【java】实现一个简单的正则：判断一个字符串是否全由数字组成

package 正则; public class TestIsNum { public static void main(String[] args) { String s1="abc&qu ...

WinSock 异步I/O模型-1

异步选择(WSAAsyncSelect):异步选择基本定义 异步选择(WSAAsyncSelect)模型是一个有用的异步 I/O 模型.利用这个模型,应用程序可在一个套接字上,接收以 Windows ...

第一行代码阅读笔记---AndroidMainfest.xml分析

按照这本书的指引,我随作者一样创建了一个安卓应用,开始了安卓开发的启程. 找到AndroidMainfest.xml这个文件,打开后看到了我创建的Activity在这个文件里被成功注册,文件内容如下: ...

Python生态工具、文本处理和系统管理(虚拟)

一.Python生态工具 一.Python内置小工具 1.秒级启动一个下载服务器 Python 内置了一个下载服务器就能够显著提升效率了 . 例如, 你的同事要让你传的文件位于某一个目录下,那么,你可 ...

C++LeetCode:: Container With Most Water

本来写的题目不是这个,而是字符串匹配,考虑了很多情况写了很久最后看了solution,发现可以用动态规划做.感觉被打击到了,果断先放着重新写一个题,后面心情好了再重新写吧,难过.每天都要被LeetCo ...

Python：列表生成式

List Comprehensions #列表生成式:Python内置的非常简单却强大的可以用来创建list的生成式. #生成list [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]可 ...