Highcharts图表技术咨询：Spline转柱状、标线隐藏等问题

1. 将Spline折线转换为垂直柱状图 #

修改图表核心配置的类型为column，并适配柱状图调整相关参数：

function createChart() {
  // ... 原有代码 ...
  chart = Highcharts.chart('container', {
    chart: {
      type: 'column', // 替换原spline类型
      marginLeft: 100
    },
    // ... 原有代码 ...
    plotOptions: {
      series: {
        animation: {
          duration
        },
        // 移除marker配置（柱状图无需标记点）
        dataLabels: {
          formatter: function() {
            return format(this.y);
          },
          align: 'center', // 可选：调整数据标签位置避免重叠
          verticalAlign: 'top'
        }
      }
    },
    // ... 原有代码 ...
  });
}

2. 价格达到特定值时自动隐藏对应绿色Plot Lines #

在redrawChart函数中，实时判断当前数据最大值，自动隐藏对应阈值的绿色参考线：

function redrawChart(index) {
  // ... 原有代码 ...
  const newValues = globalData.map(series => series.data[index][1]);
  const currentMaxY = Math.max(...newValues);

  // 遍历Y轴参考线，匹配条件则隐藏
  chart.yAxis[0].plotLinesAndBands.forEach(plotLine => {
    if (plotLine.options.color === 'green' && plotLine.options.value <= currentMaxY) {
      plotLine.hide();
    }
  });

  // ... 原有代码 ...
}

若需要在重置图表时恢复显示参考线，在createChart函数末尾添加：

chart.yAxis[0].plotLinesAndBands.forEach(plotLine => {
  if (plotLine.options.color === 'green') {
    plotLine.show();
  }
});

3. 制作柱状形式的黑色线条 #

场景1：Y轴上的黑色柱状参考带 #

用plotBands替代plotLines，设置厚度实现柱状效果：

yAxis: {
  // ... 原有代码 ...
  plotBands: [{
    color: 'red',
    from: 0,
    to: 0,
    zIndex: 0
  },{
    color: 'black',
    from: 1000,
    to: 1000,
    thickness: 20, // 柱状宽度
    zIndex: 0,
    label:{text:'Собираю спред'}
  }]
}

场景2：柱状图柱子的黑色边框 #

在plotOptions中为柱子添加黑色边框：

plotOptions: {
  column: {
    borderColor: '#000',
    borderWidth: 2
  }
}

4. 实现平滑的指数加速动画 #

避免直接修改duration导致的突兀跳跃，改用指数衰减公式计算间隔，确保加速平滑：

// 替换原有duration变量
let baseDuration = 500;
let decayFactor = 0.95; // 衰减系数，越接近1加速越平缓
let minDuration = 50; // 最小间隔，防止动画过快
let currentDuration = baseDuration;

// 修改initEvents中的定时器逻辑
function initEvents() {
  guiButton.addEventListener('click', function() {
    if (guiButtonState === 'Stop') {
      clearInterval(intervalId);
      guiButton.innerText = guiButtonState = 'Resume';
    } else {
      if (guiButtonState === 'Restart') {
        createChart();
        currentDuration = baseDuration; // 重置间隔
      }
      guiButton.innerText = guiButtonState = 'Stop';
      redrawChart(currentIterator += 1);
      
      const runAnimation = function() {
        if (currentIterator === maxIterator) {
          clearInterval(intervalId);
          currentIterator = startIterator;
          currentDuration = baseDuration;
          guiButton.innerText = guiButtonState = 'Restart';
        } else {
          redrawChart(currentIterator += 1);
          currentDuration = Math.max(minDuration, currentDuration * decayFactor);
          clearInterval(intervalId);
          intervalId = setInterval(runAnimation, currentDuration);
        }
      };
      
      intervalId = setInterval(runAnimation, currentDuration);
    }
  });
}

// 修改redrawChart中的动画时长
function redrawChart(index) {
  // ... 原有代码 ...
  chart.redraw({
    duration: currentDuration
  });
}

内容的提问来源于stack exchange，提问作者Ринат Ауди