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

2024-04-27 15:19:12

字体：大中小

来源：转载

供稿：网友

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

上一篇：CSS-定位和浮动

下一篇：localeCompare() 方法的使用

学习交流

硬盘分区如何设置准确的分区空间

硬盘分区如何设置准确的分区空间...

热门图片

猜你喜欢的新闻

猜你喜欢的关注