高图colorAxis滤镜

问题描述

是否可以自定义colorAxis以使其具有内置的rangeSelector，移动它应该在colorAxis上设置max/min属性，并以此方式帮助人们将注意力集中在密集的HighMap上特定的值范围内?

例如.让我们假设数据范围为[0,100]，当图表加载min = 0，max = 100时，但colorAxis具有这些范围选择器(最初在0上左一，在100上右一).现在，如果我将左输入移至30，右移至70，则colorAxis的最小/最大属性将设置为30/70.因此，在HighMap上，只有该范围内的数据才是彩色的，其余的则是黑色或白色.我认为当前的默认设置是白色，我在小提琴中尝试过

colorAxis: [{
    min: 100,
    //max: 110,
    //startOnTick: true,
    minColor: '#FFFFFF',
    maxColor: Highcharts.getOptions().colors[0]
}, {
    maxColor: '#ff1100'
}],

https://jsfiddle.net/x6wtqp4a/1/

更新

上拖动

ColorAxis上的范围选择器，可以在任一方向上拖动

解决方案

您可以使用stops属性为超出范围的点定义颜色:

colorAxis: [{
    min: 60,
    max: 110,
    endOnTick: false,
    startOnTick: false,
    stops: [
        [0.001, '#fff'],
        [0.001, '#c4ffd4'],
        [0.999, '#00a82d'],
        [0.999, '#000']
    ]
}]

---

实时演示: https://jsfiddle.net/BlackLabel/qsy5e8nk/

API参考: https://api.highcharts.com/highmaps/colorAxis.stops

is it possible to customize colorAxis to have an inbuilt rangeSelector, moving which should set max/min property on colorAxis and in this way help people focus on specific range of values on dense HighMaps?

Eg. lets assume Data range to be [0,100], when chart loads the min=0, max=100 but colorAxis has these range selectors (initially left one on 0 and right one on 100). Now if I move the left input to 30 and right to 70, then the colorAxis min/max property is set to 30/70. As a result on HighMap only the data within this range is colored and rest is either black or white. i think current default is white i tried in a fiddle

colorAxis: [{
    min: 100,
    //max: 110,
    //startOnTick: true,
    minColor: '#FFFFFF',
    maxColor: Highcharts.getOptions().colors[0]
}, {
    maxColor: '#ff1100'
}],

https://jsfiddle.net/x6wtqp4a/1/

Update

Range Selector on ColorAxis which is draggable in either direction

解决方案

You can use stops property to define the colors for points out of the range:

colorAxis: [{
    min: 60,
    max: 110,
    endOnTick: false,
    startOnTick: false,
    stops: [
        [0.001, '#fff'],
        [0.001, '#c4ffd4'],
        [0.999, '#00a82d'],
        [0.999, '#000']
    ]
}]

---

Live demo: https://jsfiddle.net/BlackLabel/qsy5e8nk/

API Reference: https://api.highcharts.com/highmaps/colorAxis.stops

这篇关于高图colorAxis滤镜的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！