图表根据坐标值变化颜色

样例代码

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'+this.series.name+'
记录时间：'+Highcharts.dateFormat('%Y-%m-%d %H:%M:%S',this.x)+'
Y轴坐标：'+this.y+'
状态：'+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方法修改参数使图表改变乃至重新绘制内容。