HIghmap colorAxis filter

问题

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

回答1:

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

来源：https://stackoverflow.com/questions/58956494/highmap-coloraxis-filter

标签

Highcharts