插件下载地址:
http://www.hcharts.cn/
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="js/jquery-1.11.2.js"></script>
<!--<style type="text/css">
${demo.css}
</style>-->
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {//图表 图表区、图形区和通用图表配置选项
zoomType: 'xy'//指定此图是沿着什么轴进行放大,例如zoomType: 'xy'沿着X轴y轴放大,依次类推
},
title: {//图表标题
text: 'Average Monthly Weather Data for Tokyo'
},
subtitle: {//子标题
text: 'Source: WorldClimate.com'
},
xAxis: [{//x轴
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']//类别
}],
yAxis: [{ //y轴
labels: {//y轴刻度文字标签
format: '{value}°C',//轴标签的格式化字符串,坐标轴变量用 {变量名}
style: {//设置标签的样式
color: Highcharts.getOptions().colors[2]
}
},
title: {//
text: 'Temperature',//
style: {
color: Highcharts.getOptions().colors[2]
}
},
opposite: true//是否在正常显示的对立面显示轴
}, { // Secondary yAxis
gridLineWidth: 0,//网格线的宽度,当设置为 0 时,即为不显示网格线
title: {
text: 'Rainfall',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} mm',
style: {
color: Highcharts.getOptions().colors[0]
}
}
}],
tooltip: {//数据提示框
shared: true//当工具提示是共享的,整个图形区将捕获鼠标移动或触摸事件
},
legend: {//图例说明是包含图表中数列标志和名称的容器
layout: 'vertical',//图例数据项的布局。布局类型:水平或垂直。默认是:水平
align: 'left',//图例容器(中的图例)水平对齐在图表区,合法值有"left", "center" 和 "right". 默认是: center.
x: 120,//整个图例X轴偏移量,它是相对于水平布局定下后,chart.spacingLeft 和 chart.spacingRight.的空间左右移动,当x值为负值时,图例朝左移动;正值时,图例朝右移动
verticalAlign: 'top',//垂直对齐。能取"top", "middle" or "bottom"之一。垂直对齐的位置可通过Y设置进一步调整它的位置。
y: 80,//整个图例垂直偏移量,它是相对于垂直布局定下后,chart.spacingTop 和 chart.spacingBottom的空间垂直移动,当y值为负值时,图例朝上移动;正值时,图例朝下移动
floating: true,//图例容器是否可以浮动,当此值设置为false时,图例是不可在数据区域图之上,它们是不可重叠的,而设成true,则可。默认是: false
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'//
},
series: [{
name: 'Rainfall',
type: 'column',
yAxis: 1,//多个轴的时候会有一个顺序问题
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],
tooltip: {
valueSuffix: ' mm'
}
}, {
name: 'Temperature',
type: 'spline',//对应不同的图形类型
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],
tooltip: {
valueSuffix: ' °C'
}
}]
});
});
</script>
</head>
<body>
<script src="js/highcharts.js"></script>
<script src="js/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="js/jquery-1.11.2.js"></script>
<!--<style type="text/css">
${demo.css}
</style>-->
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {//图表 图表区、图形区和通用图表配置选项
zoomType: 'xy'//指定此图是沿着什么轴进行放大,例如zoomType: 'xy'沿着X轴y轴放大,依次类推
},
title: {//图表标题
text: 'Average Monthly Weather Data for Tokyo'
},
subtitle: {//子标题
text: 'Source: WorldClimate.com'
},
xAxis: [{//x轴
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']//类别
}],
yAxis: [{ //y轴
labels: {//y轴刻度文字标签
format: '{value}°C',//轴标签的格式化字符串,坐标轴变量用 {变量名}
style: {//设置标签的样式
color: Highcharts.getOptions().colors[2]
}
},
title: {//
text: 'Temperature',//
style: {
color: Highcharts.getOptions().colors[2]
}
},
opposite: true//是否在正常显示的对立面显示轴
}, { // Secondary yAxis
gridLineWidth: 0,//网格线的宽度,当设置为 0 时,即为不显示网格线
title: {
text: 'Rainfall',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} mm',
style: {
color: Highcharts.getOptions().colors[0]
}
}
}],
tooltip: {//数据提示框
shared: true//当工具提示是共享的,整个图形区将捕获鼠标移动或触摸事件
},
legend: {//图例说明是包含图表中数列标志和名称的容器
layout: 'vertical',//图例数据项的布局。布局类型:水平或垂直。默认是:水平
align: 'left',//图例容器(中的图例)水平对齐在图表区,合法值有"left", "center" 和 "right". 默认是: center.
x: 120,//整个图例X轴偏移量,它是相对于水平布局定下后,chart.spacingLeft 和 chart.spacingRight.的空间左右移动,当x值为负值时,图例朝左移动;正值时,图例朝右移动
verticalAlign: 'top',//垂直对齐。能取"top", "middle" or "bottom"之一。垂直对齐的位置可通过Y设置进一步调整它的位置。
y: 80,//整个图例垂直偏移量,它是相对于垂直布局定下后,chart.spacingTop 和 chart.spacingBottom的空间垂直移动,当y值为负值时,图例朝上移动;正值时,图例朝下移动
floating: true,//图例容器是否可以浮动,当此值设置为false时,图例是不可在数据区域图之上,它们是不可重叠的,而设成true,则可。默认是: false
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'//
},
series: [{
name: 'Rainfall',
type: 'column',
yAxis: 1,//多个轴的时候会有一个顺序问题
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],
tooltip: {
valueSuffix: ' mm'
}
}, {
name: 'Temperature',
type: 'spline',//对应不同的图形类型
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],
tooltip: {
valueSuffix: ' °C'
}
}]
});
});
</script>
</head>
<body>
<script src="js/highcharts.js"></script>
<script src="js/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="js/jquery-1.11.2.js"></script>
<!--<style type="text/css">
${demo.css}
</style>-->
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {//图表 图表区、图形区和通用图表配置选项
zoomType: 'xy'//指定此图是沿着什么轴进行放大,例如zoomType: 'xy'沿着X轴y轴放大,依次类推
},
title: {//图表标题
text: 'Average Monthly Weather Data for Tokyo'
},
subtitle: {//子标题
text: 'Source: WorldClimate.com'
},
xAxis: [{//x轴
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']//类别
}],
yAxis: [{ //y轴
labels: {//y轴刻度文字标签
format: '{value}°C',//轴标签的格式化字符串,坐标轴变量用 {变量名}
style: {//设置标签的样式
color: Highcharts.getOptions().colors[2]
}
},
title: {//
text: 'Temperature',//
style: {
color: Highcharts.getOptions().colors[2]
}
},
opposite: true//是否在正常显示的对立面显示轴
}, { // Secondary yAxis
gridLineWidth: 0,//网格线的宽度,当设置为 0 时,即为不显示网格线
title: {
text: 'Rainfall',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} mm',
style: {
color: Highcharts.getOptions().colors[0]
}
}
}],
tooltip: {//数据提示框
shared: true//当工具提示是共享的,整个图形区将捕获鼠标移动或触摸事件
},
legend: {//图例说明是包含图表中数列标志和名称的容器
layout: 'vertical',//图例数据项的布局。布局类型:水平或垂直。默认是:水平
align: 'left',//图例容器(中的图例)水平对齐在图表区,合法值有"left", "center" 和 "right". 默认是: center.
x: 120,//整个图例X轴偏移量,它是相对于水平布局定下后,chart.spacingLeft 和 chart.spacingRight.的空间左右移动,当x值为负值时,图例朝左移动;正值时,图例朝右移动
verticalAlign: 'top',//垂直对齐。能取"top", "middle" or "bottom"之一。垂直对齐的位置可通过Y设置进一步调整它的位置。
y: 80,//整个图例垂直偏移量,它是相对于垂直布局定下后,chart.spacingTop 和 chart.spacingBottom的空间垂直移动,当y值为负值时,图例朝上移动;正值时,图例朝下移动
floating: true,//图例容器是否可以浮动,当此值设置为false时,图例是不可在数据区域图之上,它们是不可重叠的,而设成true,则可。默认是: false
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'//
},
series: [{
name: 'Rainfall',
type: 'column',
yAxis: 1,//多个轴的时候会有一个顺序问题
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],
tooltip: {
valueSuffix: ' mm'
}
}, {
name: 'Temperature',
type: 'spline',//对应不同的图形类型
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],
tooltip: {
valueSuffix: ' °C'
}
}]
});
});
</script>
</head>
<body>
<script src="js/highcharts.js"></script>
<script src="js/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="js/jquery-1.11.2.js"></script>
<!--<style type="text/css">
${demo.css}
</style>-->
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {//图表 图表区、图形区和通用图表配置选项
zoomType: 'xy'//指定此图是沿着什么轴进行放大,例如zoomType: 'xy'沿着X轴y轴放大,依次类推
},
title: {//图表标题
text: 'Average Monthly Weather Data for Tokyo'
},
subtitle: {//子标题
text: 'Source: WorldClimate.com'
},
xAxis: [{//x轴
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']//类别
}],
yAxis: [{ //y轴
labels: {//y轴刻度文字标签
format: '{value}°C',//轴标签的格式化字符串,坐标轴变量用 {变量名}
style: {//设置标签的样式
color: Highcharts.getOptions().colors[2]
}
},
title: {//
text: 'Temperature',//
style: {
color: Highcharts.getOptions().colors[2]
}
},
opposite: true//是否在正常显示的对立面显示轴
}, { // Secondary yAxis
gridLineWidth: 0,//网格线的宽度,当设置为 0 时,即为不显示网格线
title: {
text: 'Rainfall',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} mm',
style: {
color: Highcharts.getOptions().colors[0]
}
}
}],
tooltip: {//数据提示框
shared: true//当工具提示是共享的,整个图形区将捕获鼠标移动或触摸事件
},
legend: {//图例说明是包含图表中数列标志和名称的容器
layout: 'vertical',//图例数据项的布局。布局类型:水平或垂直。默认是:水平
align: 'left',//图例容器(中的图例)水平对齐在图表区,合法值有"left", "center" 和 "right". 默认是: center.
x: 120,//整个图例X轴偏移量,它是相对于水平布局定下后,chart.spacingLeft 和 chart.spacingRight.的空间左右移动,当x值为负值时,图例朝左移动;正值时,图例朝右移动
verticalAlign: 'top',//垂直对齐。能取"top", "middle" or "bottom"之一。垂直对齐的位置可通过Y设置进一步调整它的位置。
y: 80,//整个图例垂直偏移量,它是相对于垂直布局定下后,chart.spacingTop 和 chart.spacingBottom的空间垂直移动,当y值为负值时,图例朝上移动;正值时,图例朝下移动
floating: true,//图例容器是否可以浮动,当此值设置为false时,图例是不可在数据区域图之上,它们是不可重叠的,而设成true,则可。默认是: false
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'//
},
series: [{
name: 'Rainfall',
type: 'column',
yAxis: 1,//多个轴的时候会有一个顺序问题
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],
tooltip: {
valueSuffix: ' mm'
}
}, {
name: 'Temperature',
type: 'spline',//对应不同的图形类型
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],
tooltip: {
valueSuffix: ' °C'
}
}]
});
});
</script>
</head>
<body>
<script src="js/highcharts.js"></script>
<script src="js/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="js/jquery-1.11.2.js"></script>
<!--<style type="text/css">
${demo.css}
</style>-->
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {//图表 图表区、图形区和通用图表配置选项
zoomType: 'xy'//指定此图是沿着什么轴进行放大,例如zoomType: 'xy'沿着X轴y轴放大,依次类推
},
title: {//图表标题
text: 'Average Monthly Weather Data for Tokyo'
},
subtitle: {//子标题
text: 'Source: WorldClimate.com'
},
xAxis: [{//x轴
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']//类别
}],
yAxis: [{ //y轴
labels: {//y轴刻度文字标签
format: '{value}°C',//轴标签的格式化字符串,坐标轴变量用 {变量名}
style: {//设置标签的样式
color: Highcharts.getOptions().colors[2]
}
},
title: {//
text: 'Temperature',//
style: {
color: Highcharts.getOptions().colors[2]
}
},
opposite: true//是否在正常显示的对立面显示轴
}, { // Secondary yAxis
gridLineWidth: 0,//网格线的宽度,当设置为 0 时,即为不显示网格线
title: {
text: 'Rainfall',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} mm',
style: {
color: Highcharts.getOptions().colors[0]
}
}
}],
tooltip: {//数据提示框
shared: true//当工具提示是共享的,整个图形区将捕获鼠标移动或触摸事件
},
legend: {//图例说明是包含图表中数列标志和名称的容器
layout: 'vertical',//图例数据项的布局。布局类型:水平或垂直。默认是:水平
align: 'left',//图例容器(中的图例)水平对齐在图表区,合法值有"left", "center" 和 "right". 默认是: center.
x: 120,//整个图例X轴偏移量,它是相对于水平布局定下后,chart.spacingLeft 和 chart.spacingRight.的空间左右移动,当x值为负值时,图例朝左移动;正值时,图例朝右移动
verticalAlign: 'top',//垂直对齐。能取"top", "middle" or "bottom"之一。垂直对齐的位置可通过Y设置进一步调整它的位置。
y: 80,//整个图例垂直偏移量,它是相对于垂直布局定下后,chart.spacingTop 和 chart.spacingBottom的空间垂直移动,当y值为负值时,图例朝上移动;正值时,图例朝下移动
floating: true,//图例容器是否可以浮动,当此值设置为false时,图例是不可在数据区域图之上,它们是不可重叠的,而设成true,则可。默认是: false
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'//
},
series: [{
name: 'Rainfall',
type: 'column',
yAxis: 1,//多个轴的时候会有一个顺序问题
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],
tooltip: {
valueSuffix: ' mm'
}
}, {
name: 'Temperature',
type: 'spline',//对应不同的图形类型
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],
tooltip: {
valueSuffix: ' °C'
}
}]
});
});
</script>
</head>
<body>
<script src="js/highcharts.js"></script>
<script src="js/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
插件简单评价:
功能:能制作各种类型分析图,基本的饼形,柱形,扇形等, 以及一些复杂的折线图及混合图,尤其是可以制作3d图
学习:虽然东西挺多,但是官网提供了很多例子,以及中文教程等,不算难学
效果如下: