Вопрос Highstock.js: как нарисовать индикатор VWAP только для данных текущего дня? - PullRequest
0 голосов
/ 09 декабря 2018

Я разрабатываю проект, в котором мы используем библиотеку 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) Я вижу, что мы можем установить параметры только для некоторого индикатора (например, 'params: {period: 7}' для индикатора EMA), но я не нашел возможности установить период времени, для которого мы показываем индикатор (VWAP).в моем случае). Поведение по умолчанию заключается в том, что индикатор отображается для всей временной шкалы. Пожалуйста, сообщите, возможно ли установить период времени, для которого отображается индикатор VWAP?

Я имею в виду, мне не нужно устанавливать область видимого диапазонагде индикатор отображается с помощью rangeSelector до одного дня. Но вместо этого мне не нужно рисовать индикатор VWAP на другой временной шкале графика, кроме текущего дня. Знаете ли вы, что можно разработать это с highstock.js?

Спасибозаранее!

Обновление 1:

Спасибо, Войцех, 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,
        }
    }]
});

1 Ответ

0 голосов
/ 10 декабря 2018

Базовая серия вашего индикатора содержит данные о каждой минуте.Точки индикатора рассчитываются для каждой точки базовой серии.Если вы хотите иметь 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/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...