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() 方法的使用