Highcharts是一个简单灵活的JavaScript图表插件,能够方便快捷地创建各种类型的动态图表。
JavaScript图表插件highcharts详解
Highcharts是一个简单灵活的JavaScript图表插件,能够方便快捷地创建各种类型的动态图表。
快速入门
安装Highcharts
可以通过以下方式安装Highcharts:
- 直接下载Highcharts的JavaScript文件,然后在HTML文件中引用。
```
```
- 使用npm安装Highcharts。
npm install highcharts --save
创建基本图表
以下是创建一个基本的Highcharts折线图的示例代码:
Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'Monthly Average Temperature'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
}
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 2010
}
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
}, {
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
});
该代码将创建一个折线图,并渲染到ID为“container”的HTML元素中。其中包含了图表的标题、x轴和y轴的标签、数据和样式等参数。
自定义图表样式
Highcharts可以通过修改数据点的样式、轴标签、背景颜色等等来实现自定义图表样式。以下是将Highcharts柱状图的颜色改为红色的示例代码:
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0,
color: '#FF0000'
}
},
series: [{
name: 'Tokyo',
data: [
49.9,
71.5,
106.4,
129.2,
144.0,
176.0,
135.6,
148.5,
216.4,
194.1,
95.6,
54.4
]
}, {
name: 'New York',
data: [
83.6,
78.8,
98.5,
93.4,
106.0,
84.5,
105.0,
104.3,
91.2,
83.5,
106.6,
92.3
]
}, {
name: 'London',
data: [
48.9,
38.8,
39.3,
41.4,
47.0,
48.3,
59.0,
59.6,
52.4,
65.2,
59.3,
51.2
]
}, {
name: 'Berlin',
data: [
42.4,
33.2,
34.5,
39.7,
52.6,
75.5,
57.4,
60.4,
47.6,
39.1,
46.8,
51.1
]
}]
});
该代码将创建一个柱状图,同时将颜色修改为红色。
结论
以上是关于Highcharts的介绍及用法,Highcharts提供了众多可定制化的选项,帮助开发者轻松实现各种类型的动态图表。
沃梦达教程
本文标题为:JavaScript图表插件highcharts详解
猜你喜欢
- JQ判断重置单选按钮radio为空 2022-10-29
- 小程序页面间传参的五种方式实例详解 2022-08-30
- Ajax实现异步加载数据 2023-02-24
- 基于原生ajax与封装的ajax使用方法(详解) 2023-02-14
- JSONP跨域模拟百度搜索 2023-08-12
- Ajax提交post请求案例分析 2023-02-23
- ExtJS 3.x DateField menuListeners 显示/隐藏 2022-09-15
- “Windows Phone HTML5 App”和“Javascript Windows Store Project”之间的区别 2023-10-25
- JavaScript将数字转换成大写中文的方法 2023-12-27
- 第10天:自适应高度 2022-11-04