如何将AnyChart气泡图与AnyStock蜡烛图进行叠加组合？

核心思路 #

利用AnyStock的多plot机制，将蜡烛图放在主绘图区域，气泡图放在独立的顶部绘图区域，通过配置plot的位置、高度实现叠加效果，同时确保两个系列的时间轴完全对齐。

完整实现代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>蜡烛图+气泡图叠加</title>
  <!-- 引入AnyChart库 -->
  <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-bundle.min.js"></script>
  <link rel="stylesheet" href="https://cdn.anychart.com/releases/8.11.0/css/anychart-ui.min.css">
</head>
<body>
  <!-- 图表容器 -->
  <div id="container" style="width: 100%; height: 600px;"></div>

  <script>
    anychart.onDocumentReady(function() {
      // 1. 准备数据
      // 蜡烛图OHLC数据：[时间戳, 开盘价, 最高价, 最低价, 收盘价]
      const candleData = [
        [Date.UTC(2024, 0, 1), 100, 105, 98, 102],
        [Date.UTC(2024, 0, 2), 102, 108, 100, 106],
        [Date.UTC(2024, 0, 3), 106, 110, 104, 109],
        [Date.UTC(2024, 0, 4), 109, 112, 107, 111],
        [Date.UTC(2024, 0, 5), 111, 115, 109, 114]
      ];

      // 气泡图数据：[时间戳, Y轴数值, 气泡大小]
      const bubbleData = [
        [Date.UTC(2024, 0, 1), 150, 20],
        [Date.UTC(2024, 0, 2), 160, 25],
        [Date.UTC(2024, 0, 3), 170, 18],
        [Date.UTC(2024, 0, 4), 165, 22],
        [Date.UTC(2024, 0, 5), 175, 19]
      ];

      // 2. 创建股票图表实例
      const chart = anychart.stock();

      // 3. 配置蜡烛图（主plot）
      const candlePlot = chart.plot(0);
      const candleSeries = candlePlot.candlestick(candleData);
      candleSeries.name('股票价格');
      // 可选：配置蜡烛图涨跌颜色
      candleSeries.fallingFill('#ff4d4d');
      candleSeries.risingFill('#00cc66');

      // 4. 配置气泡图（顶部独立plot）
      const bubblePlot = chart.plot(1);
      bubblePlot.position('top'); // 设置plot在图表顶部
      bubblePlot.height('30%'); // 控制气泡图区域高度占比
      const bubbleSeries = bubblePlot.bubble(bubbleData);
      bubbleSeries.name('关联指标');
      // 配置气泡大小范围，避免显示异常
      bubbleSeries.minBubbleSize(5);
      bubbleSeries.maxBubbleSize(30);
      // 可选：配置气泡透明度与边框
      bubbleSeries.fill('#6666ff 0.7');
      bubbleSeries.stroke('#333399');

      // 5. 统一时间轴显示格式
      chart.xAxis().labels().format('{%Value}{dateFormat:MM/dd}');

      // 6. 优化交互体验
      chart.legend(true);
      chart.tooltip().displayMode('union'); // 合并两个系列的tooltip信息

      // 7. 渲染图表到容器
      chart.container('container');
      chart.draw();
    });
  </script>
</body>
</html>

关键细节说明 #

• 多plot分离：通过chart.plot(0)和chart.plot(1)创建两个独立绘图区域，避免蜡烛图与气泡图的Y轴数据互相干扰
• 位置与高度控制：bubblePlot.position('top')将气泡图固定在顶部，height('30%')可根据需求调整气泡图区域的占比
• 数据对齐：两个系列的X轴必须使用统一格式的时间戳（如Date.UTC生成），确保时间轴完全同步
• 气泡优化：通过minBubbleSize和maxBubbleSize限制气泡尺寸范围，提升视觉可读性

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