Highcharts HIghmap colorAxis过滤器动态绑定

我对上一个问题有一些疑问

因为我的图表可以有多个colorAxis，这些都是在运行时决定的，所以我想动态扩展colorAxis，以便为每个colorAxis绑定Jquery Ui范围选择器

在前面提供的解决方案中，范围选择器位于图表之外。是否可以像图中那样在范围选择器上覆盖colorAxis

而不是硬编码停止颜色

colorAxis:{
恩东蒂克：错，
startOnTick：错，
停止：[
[0.001，#fff']，
[0.001，#c4ffd4']，
[0.999'#00a82d']，
[0.999, '#000']
]
}，

我尝试使用colorAxis.toColor获得最小/最大值的颜色并设置停止，但颜色没有按预期变化

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

非常感谢你的帮助。 提前谢谢

我在这里工作的小提琴

更新 对于第2点，下面提供的解决方案不正确

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

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

以下是如何实现该目标的示例：

  events: {
   render() {
     let slider = document.getElementById('slider-price'),
         chart = this,
         colorAxis = chart.colorAxis[0];

        slider.style.left = (colorAxis.right / 2 + chart.marginRight) + 'px'
   }
}

演示：

在这里，我不知道你在想什么。您需要设置初始颜色。在您共享的代码中，stops[2]是最小颜色，stops[3]是最大颜色 演示：

这就是你的想法吗

---

演示：

感谢您提供的解决方案。但当存在多个colorAxis时，colorAxis.right属性不起作用。所有colorAxis都有相同的右值，因此rangeSelector最终只是彼此重叠并放置不到位。检查fiddle检查这个解决方案：我提出了一个更简单的解决方案

slider.style.left=（ca.legendGroup.translateX+chart.legend.group.translateX）+“px”也请检查我的更新，您提供的第2点的解决方案也不是我要求和期望的。你能修复它吗？我不明白-在我看来，建议的解决方案与你上一篇文章中的解决方案完全相同-