样例代码
var chart = null;//定义图表对象
var chartModelJson = null;//定义参数对象
var colorJson = {
定义各个值对应的颜色
value1:'#f7a35c'
}
var updateChart = function(){
if(判断需要的参数是否正确){
参数不正确，return结束
}
ajax.get('请求地址',null,function(data){
var dataJson = [];//定义图表需要的值
var zonesJson = [];//定义图表颜色取值json
var text = '图表介绍';
if(验证请求结果是否正常){
请求结果不正常，不再绘制图表
}else{
var list = data.data;
//循环list，组装dataJson和zonesJson
for(var i = 0;i<list.length;i++){
dataJson.push({x:list[i].time,y:parseInt(list[i].value),status:list[i].status});
zonesJson.push({value:list[i].time,color:colorJson[list[i].status]});
}
//增加dataJson和zonesJson的值到当前时间
var newDate = new Date().getTime();
dataJson.push({x:newDate,y:parseInt(list[list.length-1].value),status:list[list.length-1].status});
zonesJson.push({value:newDate,color:colorJson[list[list.length-1].status]});
}
if(chart == null){
chart = Highcharts.chart('historyStatusChart', {
chart: {type: 'spline'},
subtitle: {text:text},
title: {text: '图表名称'},
xAxis: {type: 'datetime',dateTimeLabelFormats: {month: '%e. %b',year: '%b'},title: {text: '状态记录时间'}},
yAxis: {title: {text: 'Y轴坐标'}},
tooltip: {formatter:function(){return'<strong>'+this.series.name+'</strong><br/>记录时间：'+Highcharts.dateFormat('%Y-%m-%d %H:%M:%S',this.x)+'<br/>Y轴坐标：'+this.y+'<br/>状态：'+this.point.status;}},//格式化提示语
plotOptions: {spline: {marker: {enabled: false}}},
credits:{enabled: false},//不展示版权信息
exporting:{enabled:false},//不显示打印标签
series: [{name: '线条名称',data:dataJson,zoneAxis: 'x',zones: zonesJson,showInLegend: false}]//showInLegend: false不显示线条指示
});
}else{
chart.update({
subtitle: {text:text},
series: [{name: '线条名称',data:dataJson,zoneAxis: 'x',zones: zonesJson,showInLegend: false}]
});
}
},false);
}
知识点详解
用途介绍
我们经常会遇到这样的需求：用不同颜色标识出不同范围的值，例如 90-100 用绿色表示，60-80 用蓝色表示，小于 60用红色表示。在 Highcharts 4.1 之前，我们可以通过 plotBands 来标识出不同范围值对应的背景，或者用 plotLine 画一条标识线，还可以用不同颜色标记出点的颜色，这些解决方案都有自己的用途，但在某些情景下并不是最优方案。
Highcharts 4.1 增加了一个非常牛逼的新特性：Zones，先来看个例子：
示例图片
zones参数
zones: [{
value: 0,//颜色的取值范围，大于等于该值的显示color的颜色
color: '#f7a35c',//颜色值
dashStyle: 'dot'//线条类型，默认是实线，dot表示虚线
} ]
更换颜色取值的坐标
根据上述样例，只能做到通过Y轴的值来调整图表中线条的颜色。那么我们该如何使图表根据X轴的值来调整颜色呢？
在需要调整颜色的series中增加zoneAxis参数，zoneAxis参数定义图表根据哪个轴的值来调整颜色，默认zoneAxis的值为'Y'。
使用建议
如果同一个页面中的不是需要同时展示多个chart，建议不要通过Highcharts同时绘制多个chart。可以创建一个chart，然后根据chart的update方法修改参数使图表改变乃至重新绘制内容。
