如何在FusionCharts颜色范围刻度值变化时获取该值？

DevOps 小满

2026-7-26

Fusion Map颜色范围刻度调整的值捕获方案

目前Fusion Charts官方文档中没有专门针对颜色范围滑块调整的原生事件，但可以通过以下两种方法实现需求：

1. 监听滑块DOM事件

Fusion Map的颜色范围滑块会渲染为普通DOM元素，可直接监听其input或change事件获取值：

定位滑块DOM（类名通常包含fusioncharts-color-range-slider）
从滑块的value属性读取当前值，同步到图表配置

示例代码：

// 假设图表实例为chartObj
const sliders = document.querySelectorAll('.fusioncharts-color-range-slider input');
sliders.forEach(slider => {
  slider.addEventListener('input', function() {
    const currentValue = this.value;
    // 根据滑块类型（左/右）更新colorRange配置
    const colorRange = chartObj.getChartAttribute('colorRange');
    // 调整对应刻度后重新渲染
    chartObj.setChartAttribute('colorRange', colorRange);
  });
});

2. 用`beforeRender`事件监听配置变化

通过beforeRender事件对比前后的colorRange配置，判断是否发生了刻度调整：

初始化时保存初始colorRange配置
每次渲染前对比当前配置与历史配置，捕获变化的刻度值

示例代码：

let prevColorRange = null;
chartObj.addEventListener('beforeRender', function(eventObj) {
  const currentColorRange = eventObj.sender.getChartAttribute('colorRange');
  if (prevColorRange && JSON.stringify(currentColorRange) !== JSON.stringify(prevColorRange)) {
    const minVal = currentColorRange.minValue;
    const maxVal = currentColorRange.maxValue;
    console.log('更新后的刻度范围：', minVal, '-', maxVal);
  }
  prevColorRange = JSON.parse(JSON.stringify(currentColorRange));
});