HIGHmap colorAxis滤镜动态绑定

Question

我有一些疑问扩展了我先前的问题HIghmap colorAxis filter

由于我的图表可以具有在运行时确定的多个colorAxis，所以我想动态扩展colorAxis以将其自身与每个colorAxis的Jquery-Ui范围选择器绑定在一起

1. 在先前在SO上提供的解决方案中，范围选择器位于图表之外。是否可以像这张图片一样将colorAxis覆盖在rangeSelector上？

2. 而不是硬编码停止色

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

我试图使用colorAxis.toColor来获得最小/最大颜色并设置色标，但是颜色没有按预期变化。

3. 由于colorAxis是从数据中动态绘制的，如何动态设置范围选择器的步长，以使交互平滑？例如。 1个colorAxis的dataRange可以是0-1，而其他的可以是0-1000，因此如何动态设置步进以获得流畅的体验？

非常感谢您的帮助。提前致谢。

我在https://jsfiddle.net/jcy02o9a/工作过的小提琴

UPDATE对于第2点，以下提供的解决方案不正确。

 ca.update({
              stops: [
                [stop1, '#fff'],
                [stop1, ca.legendColor.stops[1].color.input],
                [stop2, ca.legendColor.stops[2].color.input],
                [stop2, '#000']
              ]
            })

请看下面的动画。在100标记处的黑色矩形内。颜色随着滑块的移动而变化。这意味着当滑块移动时，值100的颜色会不断变化。这是错误的，应将颜色固定为原始颜色。只是最小/最大小于/大于范围选择器的值应该变成白色/黑色

Answer 1

所以：

1. 这里是如何实现的示例：

     events: {
      render() {
        let slider = document.getElementById('slider-price'),
            chart = this,
            colorAxis = chart.colorAxis[0];
   
           slider.style.left = (colorAxis.right / 2 + chart.marginRight) + 'px'
      }
   }
   

演示：https://jsfiddle.net/BlackLabel/o6jrxy35/1/

2. 这里我不确定您的想法。您需要设置初始颜色。在您共享的代码中，stops [2]是最小颜色，stops [3]是最大颜色。

演示：https://jsfiddle.net/BlackLabel/zdsbqa73/

3. 这是您的初衷吗？

演示：https://jsfiddle.net/BlackLabel/4h1o5ecw/