相信大家和小M一样，也有遇到过需要利用报表来制图表的情况，关于图表制作插件有：Highcharts和Echarts两种，两种里面东西差不多，小M是因为Highcharts里面的页面比较好看就使用了Highcharts插件，需要的，可以先去看看highcharts插件的API文档，在这里，小M献上链接 http://www.hcharts.cn/，，，功能非常强大，兼容IE6+、支持移动端、图表类型丰富、方便快捷的HTML5交互型图表。
这里我给大家分享一个仪表图的设计，，
首先，最重要的是导包，有需要的可以直接去官网下载
因为小M学习的时候，学的有点杂，这里是基本上所有的包都要了，大家可以随自己需要的去官网下载
这是一个一周内每天的商铺净收入的一个仪表图,其中html中的AJAX，给大家贴上，记得页面里面要引包
function yibiaotu(){
var temp = [110,150,120,321,140];//你所查出的数据，动态加载的数据
var maxT = temp[0];//将第一个数先假设为最大值
var len = temp.length; //获取数据数组的长度
var times = ['星期天','星期一', '星期二', '星期三', '星期四','星期五','星期六'];//每次转动仪表图的名字
for (var i = 0; i < len; i++){
title.push({"text":+times[i]+" 收益 "+temp[i]+" 元"})
if (temp[i] > maxT) {
maxT = temp[i];
}
} //这里是来求数据数组中的最大数，最后将最大数赋值给maxT
series.push({"name":times[0]+" 总计净收益 " ",'type': 'gauge',"data":[{value: temp[0], name: '周净收入汇总'}]});//献给series赋初值，直接把第一个数据给进去，要不然加载出来后出现的是0值或者空白，定时器时间到时会突然出来一个title，会非常突兀
//对最大的数求最高位加一后后面添0，如：201----300var maxg = Math.ceil((maxT)/(Math.pow(10,(maxT.toString().length-1))));
var maxt = maxg*(Math.pow(10,(maxT.toString().length)-1));
Highcharts.setOptions({
lang: {
printChart:"打印图表",
downloadJPEG: "下载JPEG 图片" ,
downloadPDF: "下载PDF文档" ,
downloadPNG: "下载PNG图片" ,
downloadSVG: "下载SVG矢量图"
}//设置汉字性的下载方式，若不下载的也会有，只不过是英文
});
$('#container').highcharts({
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: name
},//仪表图上方显示的标题
pane: {
startAngle: -150,//开始的角度
endAngle: 150,//结束的角度//这里是面板背景的相关设置
background: [{
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#FFF'],
[1, '#333']
]
},
borderWidth: 0,
outerRadius: '109%'
}, {
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#333'],
[1, '#FFF']
]
},
borderWidth: 1,
outerRadius: '107%'
}, {
// default background
}, {
backgroundColor: '#DDD',
borderWidth: 0,
outerRadius: '105%',
innerRadius: '103%'
}]
},
// the value axis
yAxis: {
min: 0,//仪表盘上的最小值
max: maxt,//仪表盘上的最大值
minorTickInterval: 'auto',//每隔多少标记
minorTickWidth: 1,//坐标轴的次刻度线的线条宽度
minorTickLength: 10,//坐标轴的次刻度显示线条长度
minorTickPosition: 'inside',//次刻度线相对于坐标轴线的位置
minorTickColor: '#666',//次刻度线的颜色
tickPixelInterval: 30,
tickWidth: 1,//刻度线的宽
tickPosition: 'inside',//刻度线相对于轴线的位置
tickLength: 1,//刻度线的长度
tickColor: '#666',//刻度线的颜色
labels: {
step: 2,//显示n倍数的标签，2是表示标签间隔一个轴标签显示
rotation: 'auto'
},
title: {
text: '收益（元）'
},
plotBands: [{
from: 0,//标识区开始值
to: (maxt*0.6),//标识区结束值 ，这里给最大值*0.6显示结束值
color: '#55BF3B' // green，颜色，从开始到结束的颜色
}, {
from: (maxt*0.6),
to: (maxt*0.8),
color: '#DDDF0D' // yellow
}, {
from: (maxt*0.8),
to: maxt,
color: '#DF5353' // red
}]
},
credits: {
enabled: false //是否显示logo，默认为显示，false不显示
} ,
series: series
},
// Add some life
function (chart) {
if (!chart.renderer.forExport) {
var j = -1;
setInterval(function () {
if(j<temp.length-1){
j++;
}else{
j=0;
}/循环显示数据
var point = chart.series[0].points[0],
newVal,
inc=temp[j];
point.update(inc);//更新数据
chart.setTitle(title[j]);
}, 3000);//一个定时器，每隔3秒转一次
}});
}好了，就分享到这里，有什么不懂得，楼下评论，咨询小M哦，，，muma~~~ 进来点个赞么