canvas图表插件

HTML5 Canvas 插件 ／ 2-1 Chart.js基本使用

canvas图表插件：

Chart.js：

为设计师和开发人员提供的简单而灵活的JavaScript图表。使用的是响应式布局。

官网地址：http://www.chartjs.org/

下载Chart.js文件。

写出canvas元素；

引入Chart.js文件；

创建图标对象：

var myChart = new Chart(ctx, {
    type: 'bar',//这里的bar是柱状图的意思
    data: （数据）,
    options: （设置）
}

 HTML5 Canvas 插件 ／ 2-3 创建Chart.js图表的两种方式

不同版本的chartjs，创建方式不同，针对1.0版本和2.0版本。

创建方式：（例子，创建柱状图）

var barChart = new Chart(ctx,{
    type: 'bar', //类型
    data: {}, //数据
    option: {} //功能
});

//2.0版本

 

 

var barChart = new Chart.Bar(ctx,{
    data: {}, //数据
    option: {} //功能
});

//1.0版本,这个版本在1.0/2.0都可使用。

 HTML5 Canvas 插件 ／ 2-4 创建折线图

var ctx = document.getElementById('myChart'); //2.0
var line = new Chart(ctx, {
　　type: 'line',
　　data: {
　　　　labels: ['ee','qq'],//横坐标的值
　　　　datasets: [
　　　　　　{
　　　　　　　　label: "haha",//图表标签
　　　　　　　　fill: true,//折线以下是否用颜色填充
　　　　　　　　data: [11, 22]//纵坐标的值
　　　　　　　　borderColor: 'blue',//设置折线颜色
　　　　　　　　lineTension: 0,//设置折点的贝塞尔曲线
　　　　　　}
　　　　]
　　},
　　options: {}
});

设置图表的位置和大小： 在canvas元素的外层设置一个div元素，为div元素设置高宽即可； 为div设置position改变图表的位置

 

针对单个图标进行配置：（具体查看官网） options: { title: { display: true, text: '内容' } }

 

全局方式配置图表，对所有图表全都起作用。 Chart.defaults.global.title.text = "我的图表";

 

HTML5 Canvas 插件 ／ 3-6 如何使用混合型图表

只能在柱状图中使用混合型图表类型。

最外层的type必须为“bar”， datasets里添加type属性设置进行混合。

HTML5 Canvas 插件 ／ 4-1 Chartist.js简介

Chartist.js插件：

是一个简单的响应式图表插件， 支持svg格式，图表数据转换十分灵活，同时也支持多种图表展现形式，

官网：http://gionkunz.github.io/chartist-js/

 

 

优势：

配置十分简单，可以很方便地转换各种图表数据格式。（不需要设置样式，只需关注图表数据）

css和JavaScript分离，因此代码比较简洁，使用就相对方便。

响应式图表，支持不同浏览器尺寸和分辨率。

 

使用Chartist.js

HTML5 Canvas 插件 ／ 5-1 HighCharts.js简介

HighCharts.js插件：

让数据可视化更简单， 兼容ie6+、完美支持移动端，图表类型丰富，方便快捷的HTML5交互性图表库，

官网：http://www.highcharts.com/

 

优势：

兼容性：兼容当今所有的浏览器，包括iphone、ie和火狐等等；

支持大部分的图表类型：直线图，曲线图，区域图，区域曲线图，柱状图，饼状图，散步图；

提示功能：鼠标移动到图表的某一点上有提示信息。

 

https://www.hcharts.cn/

HighChart.js中文网站。