最近都在做数据的图标显示,使用的是highcharts.js插件,现在来记录一下,以免后期久了没用又忘记了;下面先添加两个链接:
highcharts.js的API:https://api.hcharts.cn/highcharts
highcharts.js的使用 教程:https://www.evget.com/article/2014/8/27/21514.html
1、实现一条曲线的数据图:
<div id="container"></div>
<script src="js/jQuery.js"></script>
<script src="js/highcharts.js"></script>
<script>
$(function () {
var data_average = [ 92.5, 91.6, 90.6, 91.6, 91.6 ]; /* 每一天24小时数据,总共6个数据,分为4小时显示一个当时的情绪的平均数据 */
$('#container').highcharts({
chart: {
backgroundColor: {
linearGradient: [0, 0, 500, 500],
stops: [
[0, '#56a3c4'],
[1, '#6dc290']
]
},/* 改变整个图的背景颜色 */
type: 'spline'/* 制定图的类型 */
},
color: ['#333'],
title: {
text: '情绪' /* 标题上 */
},
subtitle: {
text: '' /* 标题下 */
},
xAxis: {
labels:{
style:{
color: '#000'/* 设置轴标签字体颜色 */
}
},
categories: ['04:00', '08:00', '12:00', '16:00', '20:00','24:00']/* x轴标签 */
},
yAxis: {
title: {
text: ''/* y轴说明 */
},
plotBands: [{ // Light air
from: 70,
to: 80,
color: '#333',
label: {
text: '不正常',
style: {
color: '#fff'
}
}
}, { // Light breeze
from: 80,
to: 90,
color: '#f60',
label: {
text: '正常',
style: {
color: '#fff'
}
}
}, { // Gentle breeze
from: 90,
to: 100,
color: '#eee',
label: {
text: '不正常',
style: {
color: '#333'
}
}
}],
labels: {
formatter: function () {
return this.value + '';/*回调javascript函数来格式化标签,值通过this.value获得*/
},
style:{
color: '#000'
}
},
max: 100,
min: 70,
tickInterval: 5/* y轴间隔 */
},
tooltip: {
crosshairs: true,
shared: true
},
plotOptions: {
series: {/* 设定折线条颜色 */
/*color: '#fff'*/
},
spline: {/*
dataLabels: {// 每个点能显示y轴的数据
enabled: true
},*/
marker: {
radius: 4,
lineColor: '#333',
lineWidth: 1 /* 曲线条的宽度 */
},
}
},
series: [
{
name: '情绪',
marker: {
symbol: 'diamond'
},
data: [{
y: data_average[0],/* 初始值 */
}, data_average[1], data_average[2], data_average[3], data_average[4], data_average[5] ],/* x轴对应的y轴的每个数据 */
color: 'blue'
}]
});
});
</script>
2、实现多条曲线的数据图:
$(function () {
var Water = document.getElementById('total_water');
var data = [ 0, 1000, 200, 2320, 100,0 ]; /* 每一天24小时数据,总共6个数据,分为4小时一个,每个都是四小时水分的总和 */
var data1= [ 0, 350, 4200, 25, 628, 0 ]; /* 每一天24小时数据,总共6个数据,分为4小时一个,每个都是四小时蛋白质的总和 */
var data2 = [ 0, 2220, 1320, 0, 626, 1520 ]; /* 每一天24小时数据,总共6个数据,分为4小时一个,每个都是四小时内糖分的总和 */
var total_data = 0;
for (var i=0; i<data.length; i++ ){
total_data += data[i];
}
Water.innerHTML = total_data; /* 计算每天 水分的总和 */
$('#container').highcharts({
chart: {
backgroundColor: {
linearGradient: [0, 0, 500, 500],
stops: [
[0, '#56a3c4'],
[1, '#6dc290']
]
},/* 改变整个图的背景颜色 */
type: 'spline'/* 制定图的类型 */
},
color: ['#333'],
title: {
text: '' /* 标题上 */
},
subtitle: {
text: '' /* 标题下 */
},
xAxis: {
labels:{
style:{
color: '#000'/* 设置轴标签字体颜色 */
}
},
categories: ['04:00', '08:00', '12:00', '16:00', '20:00','24:00']/* x轴标签 */
},
yAxis: {
title: {
text: ''/* y轴说明 */
},
plotBands: [{ // Light air
from: 0,
to: 1500,
color: '#fff',
label: {
text: '不正常',
style: {
color: '#333'
}
}
}, { // Light breeze
from: 1500,
to: 3500,
color: '#f60',
label: {
text: '正常',
style: {
color: '#fff'
}
}
}, { // Gentle breeze
from: 3500,
to: 5000,
color: '#333',
label: {
text: '不正常',
style: {
color: '#fff'
}
}
}],
labels: {
formatter: function () {
return this.value + 'g';/*回调javascript函数来格式化标签,值通过this.value获得*/
},
style:{
color: '#000'
}
},
max: 5000,
min: 0,
tickInterval: 1000/* y轴间隔 */
},
tooltip: {
crosshairs: true,
shared: true
},
plotOptions: {
series: {/* 设定折线条颜色 */
color: '#fff'
},
spline: {
dataLabels: {/* 每个点能显示y轴的数据 */
enabled: true
},
marker: {
radius: 4,
lineColor: '#333',
lineWidth: 1 /* 曲线条的宽度 */
},
}
},
series: [{
name: '水分',
marker: {
symbol: 'diamond'
},
data: [{
y: data[0],/* 初始值 */
}, data[1], data[2], data[3], data[4], data[5]],/* x轴对应的y轴的每个数据 */
color: '#333' /* 该条曲线的颜色 */
},
{
name: '蛋白质',
marker: {
symbol: 'diamond'
},
data: [{
y: data[0],/* 初始值 */
}, data1[1],data1[2], data1[3], data1[4], data1[5]],/* x轴对应的y轴的每个数据 */
color: '#f60'
},
{
name: '糖分',
marker: {
symbol: 'diamond'
},
data: [{
y: data[0],/* 初始值 */
}, data2[1], data2[2], data2[3], data2[4], data2[5]],/* x轴对应的y轴的每个数据 */
color: 'red'
}
]
});
});
</script>
3、实现柱状图:
<script>
$(function () {
var Step = document.getElementById('total_step');
var data = [ 680, 3500, 4500, 2500, 681,5002,1001 ]; /* 每一天24小时数据,总共6个数据,分为4小时一个,每个都是四小时步数的总和 */
var total_data = 0;
for (var i=0; i<data.length; i++ ){
total_data += data[i];
}
Step.innerHTML = total_data; /* 计算每天 步数的总和 */
Highcharts.chart('container1', {
chart: {
/* backgroundColor: '#67b99e',/* 改变整个图的背景颜色 */
backgroundColor: {
linearGradient: [0, 0, 500, 500],
stops: [
[0, '#56a3c4'],
[1, '#6dc290']
]
},
type: 'column'
},
title: {
text: '运动报告',/* 上标题 */
style: {
color: '#fff',
fontSize: '24px'
}
},
subtitle: {
text: ''/* 下标题 */
},
xAxis: {
labels:{
style:{
color: '#000'/* 设置轴标签字体颜色 */
}
},
type: 'category'
},
yAxis: {
title: {
text: ''
},
plotBands: [{ // Light air
from: 0,
to: 1500,
color: '#333',
label: {
text: '不正常',
style: {
color: '#fff'
}
}
}, { // Light breeze
from: 1500,
to: 3500,
color: '#f60',
label: {
text: '正常',
style: {
color: '#fff'
}
}
}, { // Gentle breeze
from: 3500,
to: 5000,
color: '#eee',
label: {
text: '不正常',
style: {
color: '#333'
}
}
}],
labels: {
formatter: function () {
return this.value + '步';/*回调javascript函数来格式化标签,值通过this.value获得*/
},
style:{
color: '#000'
}
},
max:5000,
min: 0,
tickInterval: 1000/* y轴间隔 */
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.1f}'/* 给单位 */
}
}
},
series: [{
name: '计步',
colorByPoint: true,
data: [{
name: '周一',/* x轴标签 */
y: data[0]
}, {
name: '周二',
y: data[1]
}, {
name: '周三',
y: data[2]
}, {
name: '周四',
y: data[3]
}, {
name: '周五',
y: data[4]
}, {
name: '周六',
y: data[5]
}, {
name: '周日',
y: data[6]
}]
}]
});
});
</script>
4.实现山形图:
<script>
$(function () {
data_max = [4500, 3500, 4500, 4800, 4100, 4300, 4100];
data_average = [3400, 2600, 3710, 3500, 3800, 3500, 3400];
data_min = [1000, 900, 1600, 1700, 1400, 1100, 500];
$('#dbp').highcharts({
chart: {
type: 'area',
backgroundColor: '#33cc99'
},
title: {
text: '血压报告',
style: {
color: '#fff',
fontSize: '24px'
}
},
subtitle: {
text: '舒张压',
style: {
color: '#fff',
fontSize: '16px'
}
},
xAxis: {
categories: ['周一', '周二', '周三', '周四', '周五','周六','周日'],/* x轴标签 */
allowDecimals: false,
labels: {
formatter: function () {
return this.value; // clean, unformatted number for year
},
style:{
color: '#000'/* 设置轴标签字体颜色 */
}
}
},
yAxis: {
title: {
text: ''
},
plotBands: [{ // Light air
from: 0,
to: 1500,
color: '#333',
label: {
text: '不正常',
style: {
color: '#fff'
}
}
}, { // Light breeze
from: 1500,
to: 3500,
color: '#f60',
label: {
text: '正常',
style: {
color: '#fff'
}
}
}, { // Gentle breeze
from: 3500,
to: 5000,
color: '#eee',
label: {
text: '不正常',
style: {
color: '#333'
}
}
}],
labels: {
formatter: function () {
return this.value+ '';
},
style:{
color: '#000'
}
},
max:5000,
min: 0,
tickInterval: 1000/* y轴间隔 */
},
tooltip: {
pointFormat: '{series.name} <b>{point.y:,.0f}</b><br/>',
style:{
color: '#000'
}
},
plotOptions: {
area: {
/*pointStart: 1993,*/
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
}
}
},
series: [{
name: '最大值',
data: [ data_max[0],data_max[1],data_max[2],data_max[3],data_max[4],data_max[5],data_max[6] ],
color: '#003366'
},
{
name: '平均值',
data: [ data_average[0],data_average[1],data_average[2],data_average[3],data_average[4],data_average[5],data_average[6] ],
color: '#006633'
},
{
name: '最小值',
data: [ data_min[0], data_min[1], data_min[2], data_min[3], data_min[4], data_min[5], data_min[6] ],
color: '#333'
}]
});
});
</script>
<!-- 绘制舒张压结束 -->
<!-- 绘制收缩压 -->
<div id="syp"></div>
<hr />
<hr />
<script>
$(function () {
data_max = [4500, 3500, 4500, 4800, 4100, 4300, 4100];
data_average = [3400, 2600, 3710, 3500, 3800, 3500, 3400];
data_min = [1000, 900, 1600, 1700, 1400, 1100, 500];
$('#syp').highcharts({
chart: {
type: 'area',
backgroundColor: '#33cc99'
},
title: {
text: '',
style: {
color: '#fff',
fontSize: '24px'
}
},
subtitle: {
text: '收缩压',
style: {
color: '#fff',
fontSize: '16px'
}
},
xAxis: {
categories: ['周一', '周二', '周三', '周四', '周五','周六','周日'],/* x轴标签 */
allowDecimals: false,
labels: {
formatter: function () {
return this.value; // clean, unformatted number for year
},
style:{
color: '#000'/* 设置轴标签字体颜色 */
}
}
},
yAxis: {
title: {
text: ''
},
plotBands: [{ // Light air
from: 0,
to: 1500,
color: '#333',
label: {
text: '不正常',
style: {
color: '#fff'
}
}
}, { // Light breeze
from: 1500,
to: 3500,
color: '#f60',
label: {
text: '正常',
style: {
color: '#fff'
}
}
}, { // Gentle breeze
from: 3500,
to: 5000,
color: '#eee',
label: {
text: '不正常',
style: {
color: '#333'
}
}
}],
labels: {
formatter: function () {
return this.value+ '';
},
style:{
color: '#000'
}
},
max:5000,
min: 0,
tickInterval: 1000/* y轴间隔 */
},
tooltip: {
pointFormat: '{series.name} <b>{point.y:,.0f}</b><br/>',
style:{
color: '#000'
}
},
plotOptions: {
area: {
/*pointStart: 1993,*/
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
}
}
},
series: [{
name: '最大值',
data: [ data_max[0],data_max[1],data_max[2],data_max[3],data_max[4],data_max[5],data_max[6] ],
color: '#003366'
},
{
name: '平均值',
data: [ data_average[0],data_average[1],data_average[2],data_average[3],data_average[4],data_average[5],data_average[6] ],
color: '#006633'
},
{
name: '最小值',
data: [ data_min[0], data_min[1], data_min[2], data_min[3], data_min[4], data_min[5], data_min[6] ],
color: '#333'
}]
});
});
</script>