HighCharts.js问题:是否可以不绘制MACD指示直方图之外的线路

Question

i使用HighStock.js库开发一个项目。我需要不要绘制超过MACD指示直方图（https://prnt.sc/lxjoit）的线路。在与MACD指示器有关的HighStock.js文档中，有MacDline API：https：//api.highcharts.com/highstock/series.macd.macd.macd.macdline，signalline api：https://api.highcharts.com/highst.com/highstock/series.macd.macd/series.macd.signalline.Zones。这些API仅允许为MACD指示部分设置颜色，除以Y轴。所以它不合适。从文档中，尚不清楚我们是否可以不绘制直方图超出直方图的MACD指示线。您知道是否有可能实施吗？请建议。

这是JSFiddle中的实时演示，显示了MACD指示器的图表：http：//jsfiddle.net/ogorobets/x3tcpq72/14/

var ohlc = JSON.parse(ohlcStringified),
    volume = JSON.parse(volumeStringified);
var wvapSerieData = [];    
var lastDayDate = new Date("December 6, 2018 00:00:00");
var lastDayDateTs = lastDayDate.getTime();
Highcharts.stockChart('container', {
    chart: {
        borderWidth: 1
    },
    title: {
        text: 'Volume Weighted Average Price (VWAP)'
    },
    legend: {
        enabled: true
    },
    yAxis: [{
        height: '30%'
    }, {
        top: '30%',
        height: '35%',
        offset: 0
    }, {
        top: '65%',
        height: '35%',
        offset: 0
    }],
    series: [{
        type: 'candlestick',
        id: 'candlestick',
        name: 'AAPL',
        data: ohlc,
        tooltip: {
            valueDecimals: 2
        }
    }, {
        type: 'column',
        id: 'volume',
        name: 'Volume',
        data: volume,
        yAxis: 1
    }, 
    {
        type: 'macd',
        color: '#f05f5f',
        linkedTo: 'candlestick',
        showInLegend: true,
        enableMouseTracking: true,
        dataGrouping: {
            enabled: false,
        },
        zones:[
            {
                value: 0,
                color: '#f05f5f',
            },
            {
                color: '#31c26d'
            }
        ],
        yAxis: 2
    }]
});

Answer 1

不幸的是，MACD指示器的设计不是为了不绘制直方图以外的MACD指示线。

但是，您可以覆盖计算MACD值并删除超出直方图的第一个值的方法。检查代码和演示，我在下面发布了您。

添加到H.seriesTypes.macd.prototype.getValues方法的行：

// params.signalPeriod - 1 - amount of points beyond the histroram
MACD.splice(0, params.signalPeriod - 1);
xMACD.splice(0, params.signalPeriod - 1);
yMACD.splice(0, params.signalPeriod - 1);

整个包装器代码：

(function(H) {
  H.seriesTypes.macd.prototype.getValues = function(series, params) {
    var j = 0,
        EMA = H.seriesTypes.ema,
      merge = H.merge,
        defined = H.defined,
      correctFloat = H.correctFloat,
      MACD = [],
      xMACD = [],
      yMACD = [],
      signalLine = [],
      shortEMA,
      longEMA,
      i;
    if (series.xData.length < params.longPeriod + params.signalPeriod) {
      return false;
    }
    // Calculating the short and long EMA used when calculating the MACD
    shortEMA = EMA.prototype.getValues(series, {
      period: params.shortPeriod
    });
    longEMA = EMA.prototype.getValues(series, {
      period: params.longPeriod
    });
    shortEMA = shortEMA.values;
    longEMA = longEMA.values;

    // Subtract each Y value from the EMA's and create the new dataset
    // (MACD)
    for (i = 1; i <= shortEMA.length; i++) {
      if (
        defined(longEMA[i - 1]) &&
        defined(longEMA[i - 1][1]) &&
        defined(shortEMA[i + params.shortPeriod + 1]) &&
        defined(shortEMA[i + params.shortPeriod + 1][0])
      ) {
        MACD.push([
          shortEMA[i + params.shortPeriod + 1][0],
          0,
          null,
          shortEMA[i + params.shortPeriod + 1][1] -
          longEMA[i - 1][1]
        ]);
      }
    }
    // Set the Y and X data of the MACD. This is used in calculating the
    // signal line.
    for (i = 0; i < MACD.length; i++) {
      xMACD.push(MACD[i][0]);
      yMACD.push([0, null, MACD[i][3]]);
    }
    // Setting the signalline (Signal Line: X-day EMA of MACD line).
    signalLine = EMA.prototype.getValues({
      xData: xMACD,
      yData: yMACD
    }, {
      period: params.signalPeriod,
      index: 2
    });
    signalLine = signalLine.values;
    // Setting the MACD Histogram. In comparison to the loop with pure
    // MACD this loop uses MACD x value not xData.
    for (i = 0; i < MACD.length; i++) {
      if (MACD[i][0] >= signalLine[0][0]) { // detect the first point
        MACD[i][2] = signalLine[j][1];
        yMACD[i] = [0, signalLine[j][1], MACD[i][3]];
        if (MACD[i][3] === null) {
          MACD[i][1] = 0;
          yMACD[i][0] = 0;
        } else {
          MACD[i][1] = correctFloat(MACD[i][3] -
            signalLine[j][1]);
          yMACD[i][0] = correctFloat(MACD[i][3] -
            signalLine[j][1]);
        }
        j++;
      }
    }
    MACD.splice(0, params.signalPeriod - 1);
    xMACD.splice(0, params.signalPeriod - 1);
    yMACD.splice(0, params.signalPeriod - 1);
    return {
      values: MACD,
      xData: xMACD,
      yData: yMACD
    };
  }
})(Highcharts);

演示：
http://jsfiddle.net/1f2m0yz4/

文档：
https://www.highcharts.com/docs/extering-highcharts/extending-highcharts