下面是“纯JAVASCRIPT图表动画插件Highcharts Examples”完整攻略:
1. Highcharts介绍
Highcharts是一个纯JavaScript编写的图表库,提供了很多基础的图表类型及其组合,包括线图、柱状图、散点图、区域图、饼图、环形图等,并且支持动态数据加载,动画效果等,同时还有非常详细的文档及示例。
2. Highcharts的常见配置项
Highcharts的常见配置项可以参考官方文档中的API中心,下面是一些常见的配置参数及其作用:
- chart:提供整个图表的设置,如类型、大小等。
- title:标题设置。
- xAxis/yAxis:X/Y轴的数据范围设置。
- series:各个数据系列的设置,如数据源、颜色、大小等。
- tooltip:鼠标悬浮到数据项上时的提示框设置。
- legend:图例设置。
- plotOptions:针对不同类型的图表提供的配置项,如堆积效果、标签样式等。
3. Highcharts Examples
下面是两个Highcharts的示例说明。
示例1:动态更新线图
下面是一个动态更新的折线图。图表中的数据是从服务器请求而来的,每1秒钟更新一次,并通过动画效果进行切换,代码如下:
var chart = Highcharts.chart('container', { // 创建一个chart实例
chart: {
type: 'line',
animation: Highcharts.svg, // 图表初始化完成后是否进行动画效果
marginRight: 10,
events: {
load: function() { //图表加载完成后的回调函数
var series = this.series[0]; //获取当前数据系列
setInterval(function() { // 定时器每隔1s更新数据
var x = (new Date()).getTime(),
y = Math.random();
series.addPoint([x, y], true, true); // 更新数据点
}, 1000);
}
}
},
title: {
text: '动态实时更新数据折线图'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
title: {
text: '数值'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: '随机数据',
data: (function() { // 初始数据
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i++) {
data.push({
x: time + i * 1000,
y: Math.random()
});
}
return data;
})()
}]
});
示例2:堆积柱状图
下面是一个简单的堆积柱状图。图表中的数据是直接写在代码中的,用于展示不同数据系列之间的比较情况,代码如下:
var chart = Highcharts.chart('container', { // 创建一个chart实例
chart: {
type: 'column'
},
title: {
text: '2018-2019年各地油田产量情况比较'
},
xAxis: {
categories: ['山西油田', '辽河油田', '胜利油田', '大庆油田', '吉林油田']
},
yAxis: {
min: 0,
title: {
text: '亿吨'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: ( // 返回一个颜色值,用于标签的颜色设置
Highcharts.defaultOptions.title.style &&
Highcharts.defaultOptions.title.style.color
) || 'gray'
}
}
},
legend: {
align: 'right',
x: -30,
verticalAlign: 'top',
y: 25,
floating: true, // 图例是否浮动
backgroundColor: Highcharts.defaultOptions.legend.backgroundColor || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal', // 堆积效果
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
name: '2018年',
data: [5, 3, 4, 7, 2]
}, {
name: '2019年',
data: [3, 4, 4, 2, 5]
}]
});
以上是对“纯JAVASCRIPT图表动画插件Highcharts”完整攻略的说明,希望能对您有所帮助。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:纯JAVASCRIPT图表动画插件Highcharts Examples - Python技术站