Highchart EMA、价格和 MACD 图

Question

我希望生成类似 this with data here

的图表

我正尝试在 codepen

上玩这个图表

附加的数据文件具有以下值 -

1) Date
2) Open, High, Low, AdjustedClose - Plot Candlestick
3) Volume - Plot Volume
4) EMA1 & EMA2 - Plot moving averages on candlestick chart
5) macd_1, macds_1 & macdh_1 - Plot first set of MACD
6) macd_2, macds_2 & macdh_2 - Plot second set of MACD
7) macd_3, macds_3 & macdh_3 - Plot third set of MACD

不需要通过 javascript 计算移动平均线和 MACD。它已经在 JSON 数据中。

在 EMA 的图表和平滑图上需要一个导出菜单

有 3 组 MACD，带有 macd、macds 和 macdh（直方图）值，所有这些值都需要在自己的面板上并且具有不同的正负区域颜色

图表标题需要在图表顶部居中显示某种颜色。当我们将鼠标移到图表上时，需要显示 OHLC 值和日期

数据中还有一个名为“Entry_type”的字段。当值为“B”（买入）时，蜡烛下方需要显示绿色气球；当值为“S”（卖出）时，蜡烛上方需要显示红色

所有的地块都需要放在可移动的面板上（可以说 HTML 是可移动的）。这里的想法是，如果需要，那么我需要能够在 left-hand 一侧将 2 个 MACD 面板保持在另一个下方并将第三个面板移动到 right-hand 一侧，以便实际价格图表具有页面上的大量垂直 space 可以清楚地显示数据。

需要将“groupData”设置为 true，这意味着 MACD、EMA 和交易量也需要相应调整。

我是 javascript 制图的新手，这让我很难完成所有这些工作。我可以请求一些帮助来实现这些功能吗？

Answer 1

您需要做的就是为每个系列准备正确的数据格式，并为每个窗格创建一个单独的 y 轴。我在这里用你的数据准备了一个简单的例子：

for (i; i < dataLength; i += 1) {
  date = new Date(data[i].Date).getTime();
  ohlc.push([
    date, // the date
    data[i].Open, // open
    data[i].High, // high
    data[i].Low, // low
    data[i].Close // close
  ]);

  volume.push([
    date, // the date
    data[i].Volume // the volume
  ]);

  if (data[i].ema_1) {
    ema1.push([date, data[i].ema_1]);
  }
}

现场演示： https://codesandbox.io/s/highcharts-react-d-zn9oj?file=/demo.jsx

Highchart EMA、价格和 MACD 图

Highchart EMA, Price & MACD plot

highcharts