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

2/10/2017来源:心得技巧人气:518


核心就是开启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 }] }); } });