基于Highcharts实现EMA、K线、多组MACD可拖拽金融图表开发求助

前置依赖 #

需要引入以下Highcharts相关模块，直接用CDN或者npm安装均可：

• Highcharts 核心库
• Highcharts Stock 模块（用于K线、数据聚合、指标内置支持）
• Highcharts Exporting 模块（用于导出菜单功能）

核心实现逻辑 #

1. 数据预处理 #

先把返回的JSON数据拆解为各个系列对应的数据格式：

// 假设rawData为请求返回的JSON数组
const klineData = [], volumeData = [], ema1Data = [], ema2Data = []
const macd1 = { line: [], signal: [], hist: [] }
const macd2 = { line: [], signal: [], hist: [] }
const macd3 = { line: [], signal: [], hist: [] }
const tradeFlags = []

rawData.forEach(item => {
  const timestamp = new Date(item.Date).getTime()
  // K线数据
  klineData.push([timestamp, item.Open, item.High, item.Low, item.AdjustedClose])
  // 成交量
  volumeData.push([timestamp, item.Volume])
  // EMA数据
  ema1Data.push([timestamp, item.EMA1])
  ema2Data.push([timestamp, item.EMA2])
  // MACD1
  macd1.line.push([timestamp, item.macd_1])
  macd1.signal.push([timestamp, item.macds_1])
  macd1.hist.push([timestamp, item.macdh_1])
  // MACD2、MACD3格式同理
  macd2.line.push([timestamp, item.macd_2])
  macd2.signal.push([timestamp, item.macds_2])
  macd2.hist.push([timestamp, item.macdh_2])
  macd3.line.push([timestamp, item.macd_3])
  macd3.signal.push([timestamp, item.macds_3])
  macd3.hist.push([timestamp, item.macdh_3])
  // 买卖标记
  if (item.Entry_type === 'B') {
    tradeFlags.push({
      x: timestamp,
      y: item.Low * 0.995, // 显示在K线下侧
      title: 'B',
      color: '#2ecc71',
      fillColor: '#2ecc71'
    })
  } else if (item.Entry_type === 'S') {
    tradeFlags.push({
      x: timestamp,
      y: item.High * 1.005, // 显示在K线上侧
      title: 'S',
      color: '#e74c3c',
      fillColor: '#e74c3c'
    })
  }
})

2. 图表配置实现 #

所有需求点都可以通过以下配置直接实现：

Highcharts.stockChart('container', {
  // 顶部带颜色居中标题
  title: {
    text: '金融K线指标图',
    align: 'center',
    style: {
      color: '#2c3e50',
      fontSize: '18px',
      fontWeight: 'bold'
    }
  },
  // 导出菜单
  exporting: {
    enabled: true
  },
  // 悬停提示显示OHLC
  tooltip: {
    shared: true,
    split: false,
    headerFormat: '<span style="font-size:12px">{point.key:%Y-%m-%d}</span><br/>',
    pointFormatter: function() {
      if (this.series.type === 'candlestick') {
        return `Open: ${this.open}<br/>High: ${this.high}<br/>Low: ${this.low}<br/>Close: ${this.close}<br/>`
      }
      return `<span style="color:${this.color}">\u25CF</span> ${this.series.name}: <b>${this.y}</b><br/>`
    }
  },
  // Y轴配置，共5个面板：K线+成交量+3个MACD，支持拖拽调整大小
  yAxis: [
    // 主K线面板
    {
      id: 'kline',
      height: '40%',
      resize: {
        enabled: true // 支持拖拽调整高度
      },
      labels: { align: 'right' }
    },
    // 成交量面板
    {
      id: 'volume',
      top: '42%',
      height: '12%',
      resize: { enabled: true },
      labels: { align: 'right' }
    },
    // MACD1面板
    {
      id: 'macd1',
      top: '56%',
      height: '12%',
      resize: { enabled: true },
      labels: { align: 'right' }
    },
    // MACD2面板
    {
      id: 'macd2',
      top: '70%',
      height: '12%',
      resize: { enabled: true },
      labels: { align: 'right' }
    },
    // MACD3面板
    {
      id: 'macd3',
      top: '84%',
      height: '12%',
      resize: { enabled: true },
      labels: { align: 'right' }
    }
  ],
  // 全局开启数据聚合
  plotOptions: {
    series: {
      dataGrouping: {
        enabled: true,
        groupAll: true,
        approximation: 'average' // 指标聚合默认用平均值，可按需调整
      }
    },
    spline: {
      // EMA平滑配置
      lineWidth: 1,
      marker: { enabled: false }
    },
    column: {
      // MACD直方图正负配色
      color: function() {
        return this.y >= 0 ? '#2ecc71' : '#e74c3c'
      }
    }
  },
  // 系列数据配置
  series: [
    // K线
    {
      type: 'candlestick',
      name: 'K线',
      yAxis: 'kline',
      data: klineData
    },
    // EMA1 平滑折线
    {
      type: 'spline',
      name: 'EMA1',
      yAxis: 'kline',
      data: ema1Data,
      color: '#3498db'
    },
    // EMA2 平滑折线
    {
      type: 'spline',
      name: 'EMA2',
      yAxis: 'kline',
      data: ema2Data,
      color: '#f39c12'
    },
    // 买卖标记
    {
      type: 'flags',
      name: '交易信号',
      yAxis: 'kline',
      data: tradeFlags,
      shape: 'circlepin',
      stackDistance: 20
    },
    // 成交量
    {
      type: 'column',
      name: '成交量',
      yAxis: 'volume',
      data: volumeData
    },
    // MACD1 系列
    { type: 'line', name: 'MACD1', yAxis: 'macd1', data: macd1.line, color: '#3498db' },
    { type: 'line', name: 'MACD1信号线', yAxis: 'macd1', data: macd1.signal, color: '#e74c3c' },
    { type: 'column', name: 'MACD1直方图', yAxis: 'macd1', data: macd1.hist },
    // MACD2 系列
    { type: 'line', name: 'MACD2', yAxis: 'macd2', data: macd2.line, color: '#3498db' },
    { type: 'line', name: 'MACD2信号线', yAxis: 'macd2', data: macd2.signal, color: '#e74c3c' },
    { type: 'column', name: 'MACD2直方图', yAxis: 'macd2', data: macd2.hist },
    // MACD3 系列
    { type: 'line', name: 'MACD3', yAxis: 'macd3', data: macd3.line, color: '#3498db' },
    { type: 'line', name: 'MACD3信号线', yAxis: 'macd3', data: macd3.signal, color: '#e74c3c' },
    { type: 'column', name: 'MACD3直方图', yAxis: 'macd3', data: macd3.hist }
  ],
  // 左右排列MACD面板扩展逻辑
  // 如需切换MACD左右排列，可通过修改对应yAxis的side、top、left、width属性实现，示例切换函数：
  // function toggleMacdLayout() {
  //   const chart = Highcharts.charts[0]
  //   chart.update({
  //     yAxis: [
  //       { id: 'kline', height: '100%', width: '60%', left: '0%' },
  //       { id: 'volume', top: '0%', height: '33%', left: '62%', width: '38%' },
  //       { id: 'macd1', top: '33%', height: '22%', left: '62%', width: '38%' },
  //       { id: 'macd2', top: '55%', height: '22%', left: '62%', width: '38%' },
  //       { id: 'macd3', top: '77%', height: '23%', left: '62%', width: '38%' }
  //     ]
  //   })
  // }
})

注意事项 #

• 上述配置默认所有面板垂直排列，可通过注释中的切换函数修改为右侧排列MACD和成交量，给K线预留更多垂直空间
• 数据聚合开启后，Highcharts会自动根据可视区间的数量调整聚合粒度，所有指标会自动适配聚合逻辑，无需额外处理
• 买卖标记的偏移比例（0.995/1.005）可根据实际K线波动幅度调整，避免标记和K线重叠

内容的提问来源于stack exchange，提问作者usert4jju7