javascript - Highstock.js 问题 : how to draw VWAP indicator only for current day data?

Question

我开发了一个使用 Highcharts.js/Highstock.js 库的项目。我使用烛台图来显示 VWAP 指标(这里是 JSFiddle 中的示例代码: http://jsfiddle.net/ogorobets/vh3y8195/ )。

var ohlc = JSON.parse(ohlcStringified),
    volume = JSON.parse(volumeStringified);

Highcharts.stockChart('container', {
    chart: {
        borderWidth: 1
    },
    title: {
        text: 'Volume Weighted Average Price (VWAP)'
    },
    legend: {
        enabled: true
    },
    yAxis: [{
        height: '60%'
    }, {
        top: '65%',
        height: '35%',
        offset: 0
    }],
    series: [{
        type: 'candlestick',
        id: 'AAPL',
        name: 'AAPL',
        data: ohlc,
        tooltip: {
            valueDecimals: 2
        }
    }, {
        type: 'column',
        id: 'volume',
        name: 'Volume',
        data: volume,
        yAxis: 1
    }, {
        type: 'vwap',
        linkedTo: 'AAPL',
        showInLegend: true
    }]
});

对于此图表，我只需要显示当天数据的 VWAP 指标。但在官方文档( https://www.highcharts.com/docs/chart-and-series-types/technical-indicator-series )中，我看到我们只能为某些指标设置参数(例如 EMA 指标的“params: {period: 7}”)，但我没有找到设置我们要设置的时间段的选项。显示指标(在我的例子中是 VWAP)。默认行为是在整个时间轴上显示指示器。请问是否可以设置VWAP指标显示的时间段？

我的意思是我不需要将使用 rangeSelector 显示指示器的可见范围区域设置为一天。但相反，我不需要将 VWAP 指标绘制到除当天之外的其他图表时间线区域。您知道可以使用 highstock.js 进行开发吗？

提前谢谢您!

更新1:

谢谢沃伊切赫·奇米尔!根据您的想法(使用仅包含当天数据的隐藏图表系列。并基于此新图表来显示 WVAP 指标)我已经构建了我需要的解决方案。

这里是 JSFiddle 的链接:http://jsfiddle.net/ogorobets/vh3y8195/50/ 。这是我的最新代码:

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();

for(var i = 0; i < ohlc.length; i++) {
    var currentPoint = ohlc[i];
    if(lastDayDateTs <= currentPoint.x) {
         var pointToAdd = Object.assign({}, 
          currentPoint, {color: 'transparent', lineColor: 'transaprent'});
         wvapSerieData.push(pointToAdd);
    }
}

Highcharts.stockChart('container', {
    chart: {
        borderWidth: 1
    },
    title: {
        text: 'Volume Weighted Average Price (VWAP)'
    },
    legend: {
        enabled: true
    },
    yAxis: [{
        height: '60%'
    }, {
        top: '65%',
        height: '35%',
        offset: 0
    }],
    series: [{
        type: 'candlestick',
        id: 'AAPL',
        name: 'AAPL',
        data: ohlc,
        tooltip: {
            valueDecimals: 2
        }
    }, {
        type: 'column',
        id: 'volume',
        name: 'Volume',
        data: volume,
        yAxis: 1
    }, 
    {
        type: 'candlestick',
        id: 'wvap-serie',
        color: 'transparent',
        data: wvapSerieData,
        enableMouseTracking: false,
        tooltip: {
            valueDecimals: 2
        }
    },
    {
        type: 'vwap',
        linkedTo: 'wvap-serie',
        showInLegend: true,
        enableMouseTracking: true,
            dataGrouping: {
            enabled: true,
        }
    }]
});

Answer 1

您的指标基础系列每分钟都有数据。指标点是针对每个基础系列点计算的。如果您想获得每天的 VWAP，则必须提供适当的每日数据。

作为解决方法，您可以添加另一个包含每日数据的系列，使其不可见，并将其用作指示计算的基本系列。检查下面发布的示例。

Highcharts.stockChart('container', {
  chart: {
    borderWidth: 1
  },
  title: {
    text: 'Volume Weighted Average Price (VWAP)'
  },
  legend: {
    enabled: true
  },
  yAxis: [{
    height: '60%'
  }, {
    top: '65%',
    height: '35%',
    offset: 0
  }],
  series: [{
    type: 'candlestick',
    id: 'AAPL',
    name: 'AAPL',
    data: ohlc,
    tooltip: {
      valueDecimals: 2
    }
  }, {
    type: 'column',
    id: 'volume',
    name: 'Volume',
    data: volume,
    yAxis: 1
  }, {
    id: 'test',
    visible: true,
    showInLegend: false,
    color: 'rgba(0, 0, 0, 0)',
    enableMouseTracking: false,
    data: [{
      x: 1543482000000,
      y: 181.05
    }, {
      x: 1543482000000 + 24 * 3600000,
      y: 178.51
    }, {
      x: 1543482000000 + 2 * 24 * 3600000,
      y: 177.03
    }, {
      x: 1543482000000 + 3 * 24 * 3600000,
      y: 178.61
    }, {
      x: 1543482000000 + 4 * 24 * 3600000,
      y: 183.03
    }, {
      x: 1543482000000 + 5 * 24 * 3600000,
      y: 180.03
    }, {
      x: 1543482000000 + 6 * 24 * 3600000,
      y: 176.03
    }]
  }, {
    type: 'vwap',
    params: {
      period: 5
    },
    linkedTo: 'test',
    showInLegend: true
  }]
});

演示: http://jsfiddle.net/BlackLabel/w1vegobn/