-
Highcharts是一款纯javascript编写的图表库，能够很简单便捷的在Web网站或Web应用中添加交互性的图表，Highcharts目前支持直线图、曲线图、面积图、柱状图、饼图、散点图等多达18种不同类型的图表，可以满足你对Web图表的任何需求 ！
以上是Highcharts中文网上的简介！
如果论语法的简单性，或者需要画功能简单的折线、柱状以及饼状图，Highcharts是远远不如js图标库——js charts 的，但是如果涉及到复杂多样的功能特性，Highcharts甩了js charts何止8条街！
这类的Js框架通常很容易学习。下载了包后，看例子就可以了，不过Highcharts在这点上做的是非常好！
见：
Highcharts中文网首页：
Highcharts官网：
学习highcharts无需按照包下的examples例子一个个去试（我学js charts就是这么做的 !- -），
通过中文网提供的这3个页面，一个小时你就可以初步掌握这项技术！
学习的重点就是这个在线演示平台啦，它包含了下载包中的所有示例文件。而且可以点击
页面中间的这个“编辑代码”可以跳转到一个“在线测试平台”的地方，像这里
在线演示平台做的也非常详细，不过很多版块还在完善中。。。
这里是官网上的一个简单的图表示例：
-
<!DOCTYPE HTML>
-
<html>
-
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-
<title>Highcharts Example</title>
-
-
<script type="text/javascript" src=""></script>
-
<style type="text/css">
-
${demo.css}
-
</style>
-
<script type="text/javascript">
-
$(function () {
-
$('#container').highcharts({
-
chart: { //图表总体的设置
-
type: 'line' //这个默认为line即折线图,还可以为柱状column，不过饼状图不是这里设置，而是直接在series数据列上指定 type: 'pie',
-
},
-
title: { //图表标题
-
text: 'Monthly Average Temperature' //标题名称
-
},
-
subtitle: { //副标题
-
text: 'Source: WorldClimate.com'
-
},
-
xAxis: { //x轴
-
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] //x轴数据
-
},
-
yAxis: { //Y轴
-
title: {
-
text: 'Temperature (?C)' //y轴标题
-
}
-
},
-
plotOptions: { //图表标示的各种选项
-
line: { //这里由于是折线图，那么就是折线图的选项
-
dataLabels: { //数据标签
-
enabled: true //允许显示数据，默认为false，不显示具体数据
-
},
-
enableMouseTracking: false //这个让鼠标放到数据点的时候，不动态显示一个小圆圈，默认为true
-
}
-
},
-
series: [{ //这里省略了一个data数组的标示，更为方便，实际上下面的name和data都是属于data数组元素的属性，下面2组数据，就代表2组数据并列
-
name: 'Tokyo', //数据名
-
data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] //具体数据
-
}, {
-
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]
-
}]
-
});
-
});
-
</script>
-
</head>
-
<body>
-
<script src="../../js/highcharts.js"></script>
-
<script src="../../js/modules/exporting.js"></script>
-
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
-
</body>
-
</html>
highcharts是一个简单的js图表框架，不建议仔细阅读API文档，建议根据示例和实际需求，一边添加功能，一边快速学习。
阅读(739) | 评论(0) | 转发(0) |
