![](/img/trans.png)
[英]How to highlight the high and low values with different colors in an area series?
[英]Highcharts Columnrange data labels high and low different colors
在基本的Highcharts列范圍圖中,如何為低值分配顏色(藍色),為高值分配不同的顏色(紅色)?
我要參考的圖表就是這個圖表: http : //jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/columnrange/
因此,對於一月份,“-9.7”應為藍色,而“ 9.4”應為紅色。
在另一個示例中,我嘗試了以下操作:
series: [{
name: 'Temperatures',
data: [
{low: 2, high: 6, color: 'green'},
{low: 1, high: 9, color: 'yellow'},
{low: -3, dataLabels: {color: 'red'}, high: 5, color: 'blue'},
{low: 0, high: 7, color: 'orange'}
],
color: '#b9deea',
borderColor: '#92cbde',
borderRadius: 4
}]
但這會將藍色列的低值和高值的數據標簽顏色都更改為紅色。
提前致謝。
猴面包樹
在格式化程序回調中,您可以將文本包裹在span
並對其進行適當的樣式設置。
formatter: function () {
var color = this.y === this.point.high ? 'red' : 'blue';
return '<span style="color:' + color + '">' + this.y + '°C</span>';
}
示例: http : //jsfiddle.net/6ofbr32b/1/
您必須將一個點分為兩個點-代表其負值和正值,將閾值設置為0和negativeColor。 然后調整工具提示和數據標簽。
拆分可以通過這種方式實現。
//plotOptions.columnRange
negativeColor: 'red',
threshold: 0,
borderWidth: 0,
//series
keys: ['x', 'low', 'high', 'part'],
data: [
[0,-9.7, 0, 'neg'],
[0,0,9.4, 'pos'],
[1,-8.7, 0, 'neg'],
[1, 0, 6.5, 'pos'],
[2,-3.5, 0, 'neg'],
[2, 0, 9.4, 'pos'],
[3,0.0, 22.6],
[4,2.9, 29.5],
]
“ part”是一個輔助工具,對於調整工具提示和數據標簽非常有用。
數據標簽,因此如果分割點,將僅顯示一個邊緣
dataLabels: {
enabled: true,
formatter: function() {
if (this.point.part === 'neg' && this.y === this.point.low) {
return this.y + '°C';
} else if (this.point.part === 'pos' && this.point.high === this.y) {
return this.y + '°C';
} else if (!this.point.part) {
return this.y + '°C';
}
return '';
}
}
和工具提示
tooltip: {
pointFormatter: function () {
var points = this.series.points,
low = this.low,
high = this.high;
if (this.part === 'neg') {
low = this.low;
high = points[this.index + 1].high;
} else if (this.part === 'pos') {
low = points[this.index - 1].low;
high = this.high;
}
return '<span style="color:' + this.series.color + '">\u25CF</span> ' + this.series.name + ': <b>' + low + '°C</b> - <b>' + high + '°C</b><br/>';
}
},
示例: http : //jsfiddle.net/xdg67kuo/3/
通過堆積柱形圖,也可以實現所需的效果: 示例
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.