收藏，1.5k 浏览
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
目前的需求就是底下的月份（横坐标）不一定是12个月，可能是2013年1月 2013 年2月 等等，一直到 2014年2月等。时间跨度不等。
然后需要三种状态，每个横坐标的月份都有可能有三种状态中的一种，然后如图所示。用 highcharts 如何实现，试了好久好久了。
图相对于实例来解读：
假设某个摄像机 1月份正常，2月份未巡检，3-9月份正常，10月份到12月份为异常。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
换个思路，把y轴当x轴，x轴当y轴，参考官方的例子
实在不行建议用Raphael.js
同步到新浪微博
分享到微博？
与我们一起探索更多的未知
专业的开发者技术社区，为用户提供多样化的线上知识交流，丰富的线下活动及给力的工作机会
加入只需一步
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
举报理由：
推广（招聘、广告、SEO 等）方面的内容
带有人身攻击、辱骂、仇恨等违反条款的内容
与已有问题重复（请编辑该提问指向已有相同问题）
不友善内容
答非所问，不符合答题要求
其他原因（请补充说明）
补充说明：
扫扫下载 App
SegmentFault
一起探索更多未知Highcharts横向柱状图怎么做？_百度知道
你是只要横着就行呢？还是横着以后还要显示分段呢？
其他类似问题
为您推荐：
highcharts的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁1709人阅读

HighCharts中文网：
HighCharts官网：
HighCharts入门
一、什么是HighCharts
1、HighCharts是网页报表工具，开发语言是Javascript
2、HighCharts是一个简单易用、美观、跨平台、跨浏览器的图表工具
3、HighCharts支持图表的类型有：曲线图、柱状图、饼状图、区域图、散点图、综合图的各种图表需求。
直线图——line
折线图——spline
柱状图——column
饼状图——pie
区域图——area
综合图——more
一、你必须知道的
1、首先，HighCharts是基于Jquery框架开发的，所以需要在页面引入Jquery，具体代码是：
&script type=&text/javascript& src=&/ajax/libs/jquery/1.8.2/jquery.min.js&&&/script&
2、其次，需要引入HighCharts js文件
&script src=&/highcharts.js&&&/script&
& & 引入HighCharts js文件还可以是拷贝下载下来的Highcharts资源包中的js目录下的highcharts.js文件
3、如果你想使用导出功能，必须引入导出相关的js文件，该文件存在与/Highcharts-2.3.5/js/modules/目录下
&script src=&/modules/exporting.js&&&/script&
& &引入下面的三个资源文件后，你就可以参考API文档进行开发了
HighCharts 图表属性——chart
HighCharts 颜色属性——colors
HighCharts 版权属性——credits
HighCharts 导出属性——explorting
HighCharts HTML标签——labels
HighCharts 语言属性——lang
HighCharts 图例属性——legengd
HighCharts 加载属性——loading
HighCharts 导出按钮属性——navigation
HighCharts 数据点属性——plotOptions
HighCharts 数据列属性——series
HighCharts 标题和副标题——title subtitle
HighCharts 数据点提示框——tooltip
HighCharts X轴和Y轴——xAxis yAxis
Html代码 &
&&&&&&&&&&&&&&&&&http-equiv=&content-type&&content=&text/&charset=UTF-8&&&&&&&&&&&&type=&text/javascript&&src=&../jquery-1.4.4.js&&&&&&&&&&&&type=&text/javascript&&&&&&&&&&&&&&&$(function&()&{&&&&&&&&&&&&&&var&&&&&&&&&&&&&&&&$(document).ready(function()&{&&&&&&&&&&&&&&&&&&chart&=&new&Highcharts.Chart({&&&&&&&&&&&&&&&&&&//HighCharts中chart属性配置&&&&&&&&&&&&&&&&&&&&chart:&{&&&&&&&&&&&&&&&&&&&&&&renderTo:&'container',//div&标签&&&&&&&&&&&&&&&&&&&&&&type:&'line',//图表类型&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&/******************以下chart配置可选******************/&&&&&&&&&&&&&&&&&&&&&&backgroundColor:&#EAF7FF&,//图表背景色&&&&&&&&&&&&&&&&&&&&&&borderWidth:5,//图表边框宽度&&&&&&&&&&&&&&&&&&&&&&borderRadius:15,//图表边框圆角角度&&&&&&&&&&&&&&&&&&&&&&plotBackgroundColor:&#6DBFBB&,//主图表区背景颜色&&&&&&&&&&&&&&&&&&&&&&plotBorderColor:'red',//主图表边框颜色&&&&&&&&&&&&&&&&&&&&&&plotBorderWidth:2,//主图表边框宽度&&&&&&&&&&&&&&&&&&&&&&shadow:true,//是否设置阴影&&&&&&&&&&&&&&&&&&&&&&zoomType:'xy'//拖动鼠标放大图表的方向&&&&&&&&&&&&&&&&&&&&},&&&&&&&&&&&&&&&&&&&&&credits&:&{&&&&&&&&&&&&&&&&&&&&&&&&&&//enable:true,默认就为true，可以不配置&&&&&&&&&&&&&&&&&&&&&&&&&&//如果想要去除版权（也就是不显示），只需要设置enable:false即可&&&&&&&&&&&&&&&&&&&&&&&&&&href:'http://www.52wulian.org',//链接地址&&&&&&&&&&&&&&&&&&&&&&&&&&position:&{&&&&&&&&&&&&&&&&&&&&&&&&//文字的位置&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&x:-30,&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&y:-30&&&&&&&&&&&&&&&&&&&&&&&&&&},&&&&&&&&&&&&&&&&&&&&&&&&&&style:{&&&&&&&&&&&&&&&&&&&&&&&&&&&&//文字的样式&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&color:'red',&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&fontWeight:'bold'&&&&&&&&&&&&&&&&&&&&&&&&&&},&&&&&&&&&&&&&&&&&&&&&&&&&&enabled:true,//不显示highCharts版权信息,不显示为false&&&&&&&&&&&&&&&&&&&&&&&&&&text:'我爱物联网'&&&&&&&&&&&&&&&&//文字&&&&&&&&&&&&&&&&&&&&},&&&&&&&&&&&&&&&&&&&&/******************&&&&&&&&&&&&&&&&&&&&**Colors-颜色属性为可选配置&&&&&&&&&&&&&&&&&&&&**通过配置配置colors，可以轻松的设置数据列的颜色&&&&&&&&&&&&&&&&&&&&1、颜色代码可以是十六进制，也可以是英文单词，&&&&&&&&&&&&&&&&&&&&&&还可以是RGB，如同css&&&&&&&&&&&&&&&&&&&&&&2、默认是从第一个数据列起调用第一个颜色代码，&&&&&&&&&&&&&&&&&&&&&&有多少个数据列调用相应数量的颜色&&&&&&&&&&&&&&&&&&&&&&3、当数据列大于默认颜色数量时，重复从第一个&&&&&&&&&&&&&&&&&&&&&&颜色看是调用&&&&&&&&&&&&&&&&&&&&******************/&&&&&&&&&&&&&&&&&&&&colors:[&&&&&&&&&&&&&&&&&&&&&&'#000000',//黑&&&&&&&&&&&&&&&&&&&&&&'#FF0000',//红&&&&&&&&&&&&&&&&&&&&&&'#00FF00',//绿&&&&&&&&&&&&&&&&&&&&&&'#0000FF',//蓝&&&&&&&&&&&&&&&&&&&&&&'#FFFF00',//黄&&&&&&&&&&&&&&&&&&&&&&'#FF00FF',//紫&&&&&&&&&&&&&&&&&&&&&&'#FFFFFF',//紫&&&&&&&&&&&&&&&&&&&&],&&&&&&&&&&&&&&&&&&&&exporting:&{&&&&&&&&&&&&&&&&&&&&&&//enabled:true,默认为可用，当设置为false时，图表的打印及导出功能失效&&&&&&&&&&&&&&&&&&&&&&buttons:{&&&&//配置按钮选项&&&&&&&&&&&&&&&&&&&&&&&&&&printButton:{&&&&//配置打印按钮&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&width:50,&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&symbolSize:20,&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&borderWidth:2,&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&borderRadius:0,&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&hoverBorderColor:'red',&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&height:30,&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&symbolX:25,&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&symbolY:15,&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&x:-200,&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&y:20&&&&&&&&&&&&&&&&&&&&&&&&&&},&&&&&&&&&&&&&&&&&&&&&&&&&&exportButton:{&&&&//配置导出按钮&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&width:50,&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&symbolSize:20,&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&borderWidth:2,&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&borderRadius:0,&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&hoverBorderColor:'red',&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&height:30,&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&symbolX:25,&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&symbolY:15,&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&x:-150,&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&y:20&&&&&&&&&&&&&&&&&&&&&&&&&&}&&&&&&&&&&&&&&&&&&&&&&},&&&&&&&&&&&&&&&&&&&&&&filename:'52wulian.org',//导出的文件名&&&&&&&&&&&&&&&&&&&&&&type:'image/png',//导出的文件类型&&&&&&&&&&&&&&&&&&&&&&width:800&&&&//导出的文件宽度&&&&&&&&&&&&&&&&&&&&},&&&&&&&&&&&&&&&&&&&&labels:{&&&&&&&&&&&&&&&&&&&&&&&&items:[{&&&&&&&&&&&&&&&&&&&&&&&&&&//标签代码（html代码）&&&&&&&&&&&&&&&&&&&&&&&&&&html:'&style=&font-size:20&Copyright&(C)&&&href=&http://www.52wulian.org&&style=&font-size:20;text-decoration:&&我爱物联网',&&&&&&&&&&&&&&&&&&&&&&&&&&style:{&//设置标签位置&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&left:'100px',&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&top:'50px'&&&&&&&&&&&&&&&&&&&&&&&&&&}&&&&&&&&&&&&&&&&&&&&&&}],&&&&&&&&&&&&&&&&&&&&&&&&style:{&&&&//设置标签颜色&&&&&&&&&&&&&&&&&&&&&&&&&&&&color:'rgb(0,0,255)'&&&&&&&&&&&&&&&&&&&&&&&&}&&&&&&&&&&&&&&&&&&&&},&&&&&&&&&&&&&&&&&&&&xAxis:&{&&&&&&&&&&&&&&&&&&&&&&&&&&categories:&['Jan',&'Feb',&'Mar',&'Apr',&'May',&'Jun',&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&'Jul',&'Aug',&'Sep',&'Oct',&'Nov',&'Dec']&&&&&&&&&&&&&&&&&&&&&&},&&&&&&&&&&&&&&&&&&&&&&&&&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]&&&&&&&&&&&&&&&&&&&&&&}]&&&&&&&&&&&&&&&&&&});&&&&&&&&&&&&&&});&&&&&&&&&&});&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&src=&../highcharts.js&&&&&&&&&&&&src=&../exporting.js&&&&&&&&&&&&id=&container&&style=&min-width:&400&height:&400&margin:&0&auto&&&&&&&&&&&
Highcharts图表控件是目前使用最为广泛的图表控件。本文将从零开始逐步为你介绍Highcharts图表控件。通过本文，你将学会如何配置Highcharts以及动态生成Highchart图表。
一、前言（Preface）
Highcharts是一个非常流行，界面美观的纯Javascript图表库。它主要包括两个部分：Highcharts和Highstock。
Highcharts可以为您的网站或Web应用程序提供直观，互动式的图表。目前支持线，样条，面积，areaspline，柱形图，条形图，饼图和散点图类型。
Highstock可以为您方便地建立股票或一般的时间轴图表。它包括先进的导航选项，预设的日期范围，日期选择器，滚动和平移等等。
如果想要了解更多Highcharts的信息，可以参考官网：。
二、安装（Installation）
1.Highcharts沿用jQuery,MooTool以及Prototype等Javascript框架来处理基本的Javascript任务。因此,在使用Highcharts之前，需要在页面头部引用这些脚本文件。如果你使用jQuery作为基本框架，那么你需要在页面头部同时引用jQuery和Hightcharts两个文件。如下：
&script src=&/ajax/libs/jquery/1.6.1/jquery.min.js& type=&text/javascript&&&/script&
&script src=&/js/highcharts.js& type=&text/javascript&&&/script&
Highcharts(Highstock)已经内置了jQuery适配器(adapter)（注：可能是jQuery框架最流行的缘故），但是并没有内置MooTool等其他javascript框架的适配器(adapter)。因此，当我们使用MooTool等其他JS框架时，需要单独引用适配器(adapter)脚本文件。如下：
&script src=&/ajax/libs/mootools/1.3.0/mootools-yui-compressed.js& type=&text/javascript&&&/script&
&script src=&/js/adapters/mootools-adapter.js& type=&text/javascript&&&/script&
&script src=&/js/highcharts.js& type=&text/javascript&&&/script&
提示：&安装Highstock过程与上述相同，除了JavaScript文件名称是highstock.js而不是highcharts.js。
2.在您的网页头部的脚本标签，或在一个单独的js文件，添加JavaScript代码来初始化图表。renderTo参数用来设置图表渲染的位置，一般来说是一个具有ID的DIV元素（参考第3步）。
var chart1; // 全局变量
$(document).ready(function() {
chart1 = new Highcharts.Chart({
renderTo: 'container',
type: 'bar'
text: 'Fruit Consumption'
categories: ['Apples', 'Bananas', 'Oranges']
text: 'Fruit eaten'
series: [{
name: 'Jane',
data: [1, 0, 4]
name: 'John',
data: [5, 7, 3]
上述代码适用于使用jQuery作为基本框架的情况，$(document).ready()函数，表示在文档加载完成后进行相应处理。如果你使用MooTool等其他JS框架，需要使用相对应的代码来替代$(document).ready()函数。
如果你想生成HighStock图表，有一个单独的构造方法调用Highcharts.StockChart。在这些图表中，数据源是一个典型的JavaScript数组数据。其来源可以是一个单独的JavaScript文件，或者是通过Ajax调用远程服务器提供的数据。
var chart1; // 全局变量
$(document).ready(function() {
chart1 = new Highcharts.StockChart({
renderTo: 'container'
rangeSelector: {
selected: 1
series: [{
name: 'USD to EUR',
data: usdtoeur // 数组变量
3.在页面中添加一个DIV元素，作为放置Highcharts图表的容器。需要为其设置ID值，与第2步rendTo参数绑定。设置的宽度和高度将作为Highcharts图表的宽度和高度。
&div id=&container& style=&width: 100%; height: 400px&&&/div&
4.你可以通过Highcharts.setOptions方法为Highcharts图表设置一个全局的主题（可选的）。下载包含有四个预定义的主题，如果你需要使用从这些主题，只需在&highcharts.js
后引用这些文件。比如：
&script type=&text/javascript& src=&/js/themes/gray.js&&&/script&
三、如何设置参数（How to set up the options）
Highcharts使用一个JavaScript对象结构来定义参数。选项的值可以是字符串和数字，数组，其他对象，甚至是函数。当您初始化使用新Highcharts.Chart的图表，options对象将作为第一个参数传递。
如果你想在同一个页面上使用一组参数，可以定义一个选项对象（options object）来设置选项。更多内容参考#4预处理选项（Preprocessing the options）。
四、预处理参数（Preprocess the options）
了解配置对象（configuration object）的工作原理，以及如何用程序来实现，对于实现高效的Highcharts图表显得十分重要。下面将介绍JavaScript对象的基本知识点：
在上面的例子中,Highcharts options被定义为对象字面值（object literals）。通过这种方法来标记配置，我们可以的到一个清晰的，可读性强的，占用空间低的配置对象。下面这种复杂的代码对于C程序员来说可能比较熟悉：
// 不良的风格
var options = new Object();
options.chart = new Object();
options.chart.renderTo = 'container';
options.chart.type = 'bar';
options.series = new Array();
options.series[0] = new Object();
options.series[0].name = 'Jane';
options.series[0].data = new Array(1, 0, 4);
对于JavaScript程序员来说，我们更喜欢使用下面的风格。需要注意的是，两种实现方式的结果是完全相同的。
// 良好的风格
var options = {
renderTo: 'container',
defaultSeriesType: 'bar'
series: [{
name: 'Jane',
data: [1, 0, 4]
在创建命名的对象后，我们可以通过.操作符来扩展其成员。假设我们已经定义一个对象（见良好的风格代码）。下面代码代码将添加另一个series。请记住options.series是一个数组，因此我们可以使用push方法。
options.series.push({
name: 'John',
data: [3, 4, 2]
另外一个可以排上用场的事实是，对于JavsScript对象来说，点符号（.）和方括号[]是等价的。所以，你可以通过名称来访问成员。这意味着：
options.renderTo
options['renderTo']
4.1 案例学习：&preprocessing the data from CSV
通过这个简单的例子，我们将学会如何配置基本的参数(options)，然后通过一个Ajax调用远程数据以及解析数据，最后通过合适的格式展现出来。在这个例子中，我们使用jQuery来处理Ajax请求。当然，你也可以使用MooTool或者Prototype来实现类似的功能。所有的代码在$(document).ready()函数中处理。你可以在看到这个例子的效果。
(1)创建一个外部的仅包含数据的CSV文件（数据源）。从下面数据文件中，我们可以看到第一行列出了类别的名称（类似于字段名）。后继的行的第一个位置列出了series name(比如：第二行的'John')，随后的位置列出相关的值(value)。在实际开发过程中，我们经常使用PHP或者其他服务器端编程语言（C#，java等)来创建这个文件的内容。或者你会选择其他的标记格式，比较的常见的如XML或者JSON（JSON相对XML更加轻巧）。在这些情况下，jQuery可以解析出数据对象本身。
Categories,Apples,Pears,Oranges,Bananas
John,8,4,6,5
Jane,3,4,2,3
Joe,86,76,79,77
Janet,3,16,13,15
(2)定义基本的初始的参数。注意到，我们为categorys和series对象创建了空数组（empty arrays），稍后我们可以为其添加数据。
var options = {
renderTo: 'container',
defaultSeriesType: 'column'
text: 'Fruit Consumption'
categories: []
text: 'Units'
series: []
（3）加载数据。我们通过jQuery的.get方法来获取数据文件.csv的内容。在success回调函数中，我们解析请求返回的字符串，并将结果添加到参数对象（options object)的categories和series成员对象中，最后创建图表。请注意，我们不能在Ajax
callback外创建图表，因为我们要等待服务器返回的数据（当请求成功后，返回数据，该过程是异步的）。
$.get('data.csv', function(data) {
// Split the lines
var lines = data.split('\n');
// Iterate over the lines and add categories or series
$.each(lines, function(lineNo, line) {
var items = line.split(',');
// header line containes categories
if (lineNo == 0) {
$.each(items, function(itemNo, item) {
if (itemNo & 0) options.xAxis.categories.push(item);
// the rest of the lines contain data with their name in the first position
var series = {
$.each(items, function(itemNo, item) {
if (itemNo == 0) {
series.name =
series.data.push(parseFloat(item));
options.series.push(series);
// Create the chart
var chart = new Highcharts.Chart(options);
4.2 加载XML数据
从XML文件加载数据与加载CSV文件类似。Highcharts不能处理预定义的XML数据（只能处理数组）。因此，整个过程由你来编写XML数据，并为它定义一个解析函数。相对于CSV文件来说，XML的最大缺点是，它增加了一些标记数据（这也是选择JSON的缘故）。使用XML的好处在于，至少对于小量的数据来说，你不必要手动解析返回的数据。你可以使用jQuery现有的DOM解析能力来访问XML数。你可以在看到实例，数据包含在。
五、活动图(Live Charts)
尽管我们已经通过配置对象（configuration object）定义图表，然后选择性地预处理（optionally preprocessed），最后通过new Highcharts.Chart()初始化和渲染图表，我们仍然有机会通过API来改变图表。chart,axis,series以及point对象有许多方法，比如update,remove,addSeries,addPoints等等。完整的列表可以查看API参考（）下方法和属性。
5.1 案例学习：a live connection to the server
下面的例子将展示怎样构建一个活动的图表（live chart）通过每一秒种从服务器检索的数据。首先，我们要建立自定义函数requestData，它开始在图表加载事件（load event）中调用，随后在Ajax回调函数success中调用。你可以在中看到结果。
1.建立服务器。在这个例子中，我们选择PHP作为服务器脚本语言返回包含时间（time）以及y值（y value）的javascript数组。下列为live-server-data.php文件的代码：
2 // Set the JSON header
3 header(&Content-type: text/json&);
5 // The x value is the current JavaScript time, which is the Unix time multiplied by 1000.
6 $x = time() * 1000;
7 // The y value is a random number
8 $y = rand(0, 100);
10 // Create a PHP array and echo it as JSON
11 $ret = array($x, $y);
12 echo json_encode($ret);
2.定义全局变量。需要强调的是，这里必须定义chart全局变量，因为在document ready函数以及requestData函数均要访问。
1 var // global
3.实现requestData函数。在这个例子中使用jQuery中$.ajax函数来处理ajax事务（你也可以用其他ajax框架来替代）。当数据从服务器成功返回后，通过addPoint方法添加点。
* Request data from the server, add it to the graph and set a timeout to request again
4 function requestData() {
url: 'live-server-data.php',
success: function(point) {
var series = chart.series[0],
shift = series.data.length & 20; // shift if the series is longer than 20
// add the point
chart.series[0].addPoint(point, true, shift);
// call it again after one second
setTimeout(requestData, 1000);
cache: false
4.创建图表。
1 $(document).ready(function() {
chart = new Highcharts.Chart({
renderTo: 'container',
defaultSeriesType: 'spline',
load: requestData
text: 'Live random data'
type: 'datetime',
tickPixelInterval: 150,
maxZoom: 20 * 1000
minPadding: 0.2,
maxPadding: 0.2,
text: 'Value',
margin: 80
series: [{
name: 'Random data',
HighCharts 详细使用及API文档说明
一、HighCharts开发说明：
HighCharts开发实际上配置HighCharts每个部分，比如配置标题（title），副标题（subtitle）等，其中每个部分又有更细的参数配置，比如标题下有对齐方式（align），标题文字（text）等。下图为整个图表的每个部分位置说明（请对照下面HighCharts整体结构）
二、HighCharts整体结构：
通过查看API文档我们知道HighCharts结构如下：（API文档在文章后面提供下载）
var chart = new Highcharts.Chart({
&&&&&&&chart: {…} &&&&&&&&&&&&&//&配置chart图表区
&&&&&&&colors: [{...}]&&&&//&配置主体显示颜色（多个线条和柱体的颜色顺序的）
&&&&&&&credits: {…}&&&& //&配置右下角版权链接
&&&&&&&exporting: {…}&&//&配置导出及打印
&&&&&&&global: {…}&&&&& // Highcharts.SetOptions方法调用
&&&&&&&labels: {…}& &&& &&// HTML标签，可以放置在绘图的任何位置
&&&&&&&lang: {…}&&&&&& &//&语言对象属性配置
&&&&&&&legend: {…}&&&&&& &&//&配置图例选项
&&&&&&&loading: {…}&& &//&配置图表加载选项
&&&&&&&navigation: {…}&//&配置导出按钮属性
&&&&&&&pane: {…}&&&&&&&&//&仅适用于极性图表和角仪表
&&&&&&&plotOptions: {…}&&&&&&&&&&//&配置数据点选项
&&&&&&&series: [{...}]&&&&&&&&&&&&& &//&配置数据列选项
&&&&&&&subtitle: {…}&& //&配置副标题
&&&&&&&title: {…}&&&&&&&&&&&&&&&& &//&配置标题
&&&&&&&tooltip: {…}&&&&&&&&&&&&& &//&配置数据点提示框
&&&&xAxis: {…}&&&&&&&&&&&& &//&配置x轴选项
&&&&&&&yAxis: {…}&&&&&&&&&&&& &//&配置y轴选项
&&&&上面红色部分是图标完整性及美观必须自己配置的选项，其他选项无特殊需要默认就行，也就是不用配置，所以开发HighCharts是不是很简单，只需要配置简单的几个选项就行，下面详细讲解每个选项的配置。
三、HighCharts每部分详细配置：
1、chart&：图表区选项
&&&&&&&&&&&&&&主要设置图表的类型，图表装载容器名，背景，高度，宽度等图表的整体属性。
默认值
backgroundColor
设置图表区背景色
borderWidth
设置图表边框宽度
borderRadius
设置图表边框圆角角度
图表放置的容器，一般在html中放置一个DIV，获取DIV的id属性值
defaultSeriesType
默认图表类型line, spline, area, areaspline,
column, bar, pie , scatter
图表宽度，默认根据图表容器自适应宽度
图表高度，默认根据图表容器自适应高度
设置图表与其他元素之间的间距，数组，如[0,0,0,0]
plotBackgroundColor
主图表区背景色，即X轴与Y轴围成的区域的背景色
plotBorderColor
主图表区边框的颜色，即X轴与Y轴围成的区域的边框颜色
plotBorderWidth
主图表区边框的宽度
是否设置阴影，需要设置背景色backgroundColor
是否自使用图表区域高度和宽度，如果没有设置width和height时，会自适应大小
拖动鼠标进行缩放，沿x轴或y轴进行缩放，可以设置为：‘x’,'y’,'xy’
事件回调，支持addSeries方法，click方法，load方法，selection方法等的回调函数
2、colors&：数据列颜色选项
&&&&主要是数据列颜色设置，比如多条线条中的每个线条颜色。
用于展示图表，折线/柱状/饼状等图的颜色，数组形式。
一组html颜色代码
&&&&&&&&&&&&&&&&&'#058DC7',
&&&&&&&&&&&&&&&&&'#50B432',
&&&&&&&&&&&&&&&&&'#ED561B',
&&&&&&&&&&&&&&&& &'#DDDF00',
&&&&&&&&&&&&&&&&&'#24CBE5',&
&&&&&&&&&&&&&&&&&'#64E572',
&&&&&&&&&&&&&&&&&'#FF9655',
&&&&&&&&&&&&&&&&&'#FFF263',
&&&&&&&&&&&&&&&&&'#6AF9C4'
说明：1、颜色代码为html标准，可通过DW等复制想要的代码
2、默认是从第一个数据列起调用第一个颜色代码，有多少个数
据列调用相应数量的颜色
3、当数据列大于默认颜色数量时，重复从第一个颜色看是调用
3、credits&：版权链接选项
默认值
是否显示版权及链接，布尔型，默认为显示
位置。可用align调整对齐方式，x，y设置距离。
position: {
align: ‘right’,x: -10,
&&&&&&&& verticalAlign: ‘bottom’,y: -5&}
链接地址。String型，默认是highCharts官网
名片CSS模式
itemStyle&: {
cursor: ‘pointer’,color: ‘#909090′,
fontSize: ’10px’&}
显示名字。
4、exporting&：导出及打印选项
默认值
打印和导出按钮设置。其中两个按钮中又有很多样式等设置，如有需要可详细查看API文档
默认按钮样式
enableImages
在导出的图片中添加logo水印。布尔型，默认是false
是否显示按钮（也就是启用打印导出功能），布尔型，默认显示
导出图片文件名，String型
导出图片的格式，有jpg和png可选，String型
转换图片的服务器url，默认是用highcharts服务器
图片大小，数字型
5、global&：Highcharts.SetOptions方法调用
&&&&全局选项,并不适用于每一个图表。这些选项,如lang选项,必须设置使用Highcharts.setOptions方法。一般用不到，详情请查看API文档。
6、labels&：HTML标签（可放置在图表的任意地方）
默认值
包含两个选项html和style，分别代表html语句及样式
&&&&html : “”,
&&&&style {
&&&&&&&&&&&&left: ’100px’,top: ’100px’}
style:{ color : ‘#3E576F’}
7、lang&：语言配置选项，主要配置符号、导出时显示的语句、时间显示语言等。和上面的global参数有关，即调用Highcharts.SetOptions方法。下表列举常用的选项注意：lang选项其实就是配置一些显示语言，API中都有详细说明。
默认值
decimalPoint
downloadJPEG
导出显示的文字，下面还有downloadPDF等，都一样
Download JPEG image等
月份，字符串数组形式
['January' 'February', 'March', 'April', 'May', 'June', 'July',
'August', 'September', 'October', 'November', 'December']
numericSymbols
数值单位，比如1000为1k
['k', 'M', 'G', 'T', 'P', 'E']
8、legend&：图例选项，即数据类标示。
默认值
显示形式，支持水平horizontal和垂直vertical
horizontal
backgroundColor
borderColor
图例边框颜色
borderRadius
图例边框角度
是否显示图例
是否可以浮动，配合x，y属性
是否显示阴影
详见API文档
9、loading:&图表加载选项
默认值
hideDuration
淡出效果持续时间，以毫秒为单位
labelStyle
标签样式，css形式
详见API文档
showDuration
淡入效果持续时间，以毫秒为单位
图表加载样式
详见API文档
10、navigation&：&导出按钮选项，配置导出按钮及打印样式等，详见API文档。
11、pane&：极性图表和角仪表选项配置（这两种表是在新版本2.0.1新增加的选项）
12、plotOptions&：数据点选项。分不同图表类型配置不同，下面就常用的选项及spline选项列表如下
默认值
是否在数据点上直接显示数据
allowPointSelect
是否允许使用鼠标选中数据点
回调函数，格式化数据显示内容
formatter: function()& {&return this.y;&}
对某个点标记，多种样式可选
13、series&：数据列选项
默认值
显示在图表中的数据列，可以为数组或者JSON格式的数据。如：data:[0, 5, 3, 5]，或
data: [{name: 'Point 1',y: 0}, {name: 'Point 2',y: 5}]
数据列名称
数据列类型，支持 area, areaspline, bar, column, line, pie, scatter、spline
14、subtitle&：&副标题选项。和title配置一样，在title中详细讲解
15、title&：&标题选项
默认值
标题文本内容
Chart title
水平对齐方式
verticalAlign
垂直对齐方式
标题与副标题之间或者主图表区间的间距
是否浮动，如果为true，则标题可以偏离主图表区，可配合x,y属性使用
{ color: ‘#3E576F’,&
&&&&&&&&& fontSize: ’16px’}
按照水平对齐方式的距离
按照垂直对齐方式的距离
16、tooltip&：数据点提示框选项
默认值
是否显示提示框
backgroundColor
设置提示框的背景色
rgba(255, 255, 255, .85)
borderColor
提示框边框颜色，默认自动匹配数据列的
borderRadius
提示框圆角度
设置提示框内容样式，如字体颜色等
color:’#333′
回调函数，用于格式化输出提示框的显示内容。
返回的内容支持html标签如：&b&, &strong&,&br/&
17、xAxis&：x轴选项
categories
设置X轴分类名称，数组，例如：
categories: ['Apples', 'Bananas', 'Oranges']
X轴名称，支持text、enabled、align、rotation、style等属性
设置X轴各分类名称的样式style，格式formatter，角度rotation等
X轴最大值(categories为空时)，如果为null，
则最大值会根据X轴数据自动匹配一个最大值
X轴最小值(categories为空时)，如果为null，
则最小值会根据X轴数据自动匹配一个最小值
gridLineColor
网格（竖线）颜色
gridLineWidth
网格(竖线)宽度
18、yAxis&：y轴选项
&&&&&&和x轴配置相同或类似。
&&&&&&&&注意：1、以上所有参数如果没特殊要求，及为默认是，可不用再代码中配置
& & & & &&&& & &2、API中还有更多的配置选项，可通过阅读API了解详细
&&&&&&&&&&&&& & 3、红色部分为主要配置内容
四、实例说明HighCharts开发步骤
& & 1）绘制一个显示本站日访问统计，包括浏览量（pv），IP数的折线图。
2）x轴按每小时统计，y轴显示对应的数量
3）折线图上x轴对应的点显示数量，当鼠标经过改点时，用提示框形式显相关信息
4）要有图例显示每条折现代表什么数据信息
5）图表右下角加上“我爱物联网”字样并链接到www.52wulian.org
6）要有主标题和副标题
7）要能实现图表打印及导出常见格式的图片功能
2、开发步骤
1）新建一个文件夹名为“HighCharts”，并在该文件夹内新建一个名为“js”的文件夹，将所需的“highcharts.js”和“exporting.js”拷贝至“js”文件夹。
2）在“HighCharts”文件夹里新建一个html文件，随意命名，用文本编辑器写入如下内容：（html代码，相信大家都看的懂)
加载jquery
type=&text/javascript&
src=&/ajax/libs/jquery/1.7.1/jquery.min.js&&&/script&
javascript代码&&--&
type=&text/javascript&&
&&&&&&&&&&&&$(function
&&&&&&&&&&&&&&&&var
&&&&&&&&&&&&&&&&$(document).ready(function()
&&&&&&&&&&&&&&&&&&&&//定义一个HighCharts
&&&&&&&&&&&&&&&&&&&&chart
Highcharts.Chart({
&&&&&&&&&&&&&&&&&&&&});
&&&&&&&&&&&&&&&&});
&&&&&&&&&&&&});
&&&&&&&&&/script&
highC主js文件
src=&js/highcharts.js&&&/script&
，是highCharts实现打印，下载图片必须的js文件，如果不需要该功能，可不用--&
src=&js/exporting.js&&&/script&
新建一个容器，存放在head部分定义的Chart内容
。这里的id一定是chart
{...}内的renderTo的值--&
id=&highcharts1&
style=&min-width:400height:400margin:0
3）配置chart中每个选项的属性，代码如下
加载jquery
type=&text/javascript&
src=&/ajax/libs/jquery/1.7.1/jquery.min.js&&&/script&
javascript代码&&--&
type=&text/javascript&&
&&&&&&&&&&&&$(function
&&&&&&&&&&&&&&&&var
&&&&&&&&&&&&&&&&$(document).ready(function()
&&&&&&&&&&&&&&&&&&&&//定义一个HighCharts
&&&&&&&&&&&&&&&&&&&&chart
Highcharts.Chart({
&&&&&&&&&&&&&&&&&&&&&&&&//配置chart选项
&&&&&&&&&&&&&&&&&&&&&&&&chart:
&&&&&&&&&&&&&&&&&&&&&&&&renderTo:
'highcharts1',&&//容器名，和body部分的div
&&&&&&&&&&&&&&&&&&&&&&&&type:
'spline'&&&&&&&&&&&&&&&&&&&&&&&&//图表类型，这里选择折线图
&&&&&&&&&&&&},
&&&&&&&&&& &&&&//配置链接及名称选项
&&&&&&&&&&&&credits:
&&&&&&&&&&&&&&&&enabled
&&&&&&&&&&&&&&&&href
&http://www.52wulian.org&,
&&&&&&&&&&&&&&&&text
&浏览总理：291，IP总数：74&&-- 我爱物联网&
&&&&&&&&&&&&},
&&&&&&&&&&&&//配置标题
&&&&&&&&&&&&title:
&&&&&&&&&&&&&&&&text:
'我爱物联网
访问统计',
&&&&&&&&&&&&&&&&y:10&&//默认对齐是顶部，所以这里代表距离顶部10px
&&&&&&&&&&&&},
&&&&&&&&&&&&//配置副标题
&&&&&&&&&&&&subtitle:
&&&&&&&&&&&&&&&&text:
'数据来源：百度统计',
&&&&&&&&&&&&&&&&y:30
&&&&&&&&&&&&},
&&&&&&&&&&&&//配置x轴
&&&&&&&&&&&&xAxis:
&&&&&&&&&&&&&&&&categories:
'11','12',
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
'13','14','15','16','17','18','19','20','21','22','23/点']
&&&&&&&&&&&&},
&&&&&&&&&&&&//
&&&&&&&&&&&&yAxis:
&&&&&&&&&&&&&&&&title:
&&&&&&&&&&&&&&&&&&&&text:
'次数（次）'
&&&&&&&&&&&&&&&&},
&&&&&&&&&&&&&&&&labels:
&&&&&&&&&&&&&&&&&&&&formatter:
function()
&&&&&&&&&&&&&&&&&&&&&&&&return
this.value
&&&&&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&},
&&&&&&&&&&&&//配置数据点提示框
&&&&&&&&&&&&tooltip:
&&&&&&&&&&&&&&&&crosshairs:
&&&&&&&&&&&&&&&&shared:
&&&&&&&&&&&&},
&&&&&&&&&&&&//配置数据使其点显示信息
&&&&&&&&&&&&plotOptions:
&&&&&&&&&& &&&&&&&&spline
&&&&&&&&&&&&&&&&&&&&dataLabels:
&&&&&&&&&&&&&&&&&&&&&&&&enabled:
&&&&&&&&&&&&&&&&&&&&},
&&&&&&&&&&&&&&&&&&&&enableMouseTracking:
&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&},
&&&&&&&&&&&&//配置数据列
&&&&&&&&&&&&series:
&&&&&&&&&&&&&&&&name:
'浏览次数（PV）',
&&&&&&&&&&&&&&&&marker:
&&&&&&&&&&&&&&&&&&&&symbol:
&&&&&&&&&&&&&&&&},
&&&&&&&&&&&&&&&&data:
5,10,25,34,
&&&&&&&&&&&&&&&&&&&&&&&&&&&&8,12,38,22,13,14,11,
&&&&&&&&&&&&&&&&name:
&&&&&&&&&&&&&&&&marker:
&&&&&&&&&&&&&&&&&&&&symbol:
&&&&&&&&&&&&&&&&},
&&&&&&&&&&&&&&&&data:
&&&&&&&&&&&&&&&&&&&&&&&&&&5,
&&&&&&&&&&&&}]
&&&&&&&&&&&&&&&&&&&&});
&&&&&&&&&&&&&&&&});
&&&&&&&&&&&&});
&&&&&&&&&/script&
highC主js文件
src=&js/highcharts.js&&&/script&
，是highCharts实现打印，下载图片必须的js文件，如果不需要该功能，可不用--&
src=&js/exporting.js&&&/script&
新建一个容器，存放在head部分定义的Chart内容
。这里的id一定是chart
{...}内的renderTo的值--&
id=&highcharts1&
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：200994次
积分：2614
积分：2614
排名：第7174名
原创：47篇
转载：65篇
评论：35条
(2)(2)(1)(2)(1)(1)(3)(1)(1)(5)(1)(2)(2)(4)(2)(2)(1)(1)(1)(1)(1)(1)(1)(4)(6)(2)(4)(4)(5)(1)(1)(1)(10)(2)(2)(1)(6)(5)(4)(1)(15)