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指示器的时间段？

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

提前谢谢！

更新1：

谢谢Wojciech Chmiel！根据您的想法（使用仅包含当日数据的隐藏图表系列。并基于此新图表显示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/

Highstock.js问题：如何只为当日数据绘制VWAP指标？

1 个答案: