hightchart 改变点的颜色,分段显示不同颜色


核心就是开启hightchart zones,zoneAxis 选项。这样可以修改每个点之间线段的颜色。

再者,在生成series 里的 data 数组的时候,可以使用对象的形式写入,highchart 同样可以写入。

zoneAxis: 'x',  //设置以X轴为准
zones: linecolor //开启zones

        //获取数据并反转数据
        var obj = data[0].reverse();
        var sub = data[1].reverse();
        var newsub = new Array();
        var okboom  =   new Array();
        var linecolor   =   new Array();
        var ave = 0;
        var str = "";

        for (var i = 0; i < obj.length; i++) {


            var date =  $('.am-input-sm').val().split('-');
            var sur  =  sub[i].replace("月","-").replace("号","-").split('-');
            var day  =  date[0]+'/'+sur[0]+'/'+sur[1];
            var getn =  new Date(day).getDay();
            var weekDay = ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];

            //x轴数据,判断到日期为周六周日,则修改该点 color值
            var row1 = {};
            row1.name = sub[i]+' '+weekDay[getn];   
            row1.y = parseFloat(obj[i]);

            if(getn == 6 || getn == 0){
                row1.color = '#f07577';
            }

            var row2 = {};
            row2.value = i;

            //如果X轴的值,刚好为0 即周末的时候,则设定X轴值的颜色,这里线条会默认衍生到前面一个点,形成颜色不同的一小段线。

            if(getn == 0){
                row2.color = '#f07577';
            }       


            linecolor.push(row2);
           okboom.push(row1); //将点对象写入数组
           ave = ave + parseFloat(obj[i]);
        }

        for (var i = 1; i <= sub.length; i++) {
          newsub.push(i);
        }       

        //载入曲线
        $('#newcontent').highcharts({
          chart: {
            type: 'line'
          },
          title: {
            text: null
          },
          xAxis: {
            categories: newsub,
          },
          yAxis: {
            min: 0,
            title: {
              text: null
            },
            labels: {
              formatter: function() {
                if(this.value > 100)  
                    return this.value / 10000 + '万';
                else
                    return this.value;
              }
            }
          },
          tooltip: {
                crosshairs: [true, true],  
           },         
          credits: {
            enabled: false
          },
            series:[{
              name:'30日走势'+'( '+ModelName+' )', 
              data : okboom,
                zoneAxis: 'x',  //设置以X轴为准
                zones: linecolor //开启zones

            }]
        });
      }
    });

你可能感兴趣的:(PHP开发)