Непрерывное обновление старших графиков с большим количеством данных, отображающих непрерывность, не видно, поэтому нам нужна эта непрерывность в центре графика - PullRequest
Новая
       11

Непрерывное обновление старших графиков с большим количеством данных, отображающих непрерывность, не видно, поэтому нам нужна эта непрерывность в центре графика

0 голосов
/ 30 января 2019

Проблема: в настоящее время я пытаюсь построить график прямой трансляции, который будет отображать данные в диапазоне от 0,5 часа до 3 часов.Таким образом, график обновляется непрерывно, но он обновляется в крайней правой части графика.

Требование: мое требование состоит в том, что я хочу сделать то же самое, но это должно быть сделано в центре графика.Текущий поток должен быть обновлен в центре графика, а в правой части должны быть указаны будущие значения времени без данных, нанесенных на него.

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

Вот JSFiddle , важная часть: 

Highcharts.stockChart('container', {
 chart: {
        events: {
            load: function () {

                // set up the updating of the chart each second
                var series = this.series[0];
                setInterval(function () {
                    var x = (new Date()).getTime(), // current time
                        y = Math.round(Math.random() * 100);
                    series.addPoint([x, y], true, true);
                }, 1000);
                  var series1 = this.series[1];
                setInterval(function () {
                    var x = (new Date()).getTime(), // current time
                        y = Math.round(Math.random() * 100);
                    series1.addPoint([x, y], true, true);
                }, 1000);
                  var series2 = this.series[2];
                setInterval(function () {
                    var x = (new Date()).getTime(), // current time
                        y = Math.round(Math.random() * 100);
                    series2.addPoint([x, y], true, true);
                }, 1000);
            }
        }
    },

1 Ответ

0 голосов
/ 30 января 2019

Я пытался построить нулевые данные по будущим значениям меток времени, но Stockchart не принимает такие данные и ничего не отображает.

Это происходит потому, что по умолчанию xAxis.ordinal = true это означает, что точкирасположены на графике на одинаковом расстоянии независимо от фактического времени или x расстояния между ними.Решение простое, установите xAxis.ordinal = false и установите крайние значения оси, чтобы показать будущее время перед линией графика.Проверьте демо и код, размещенный ниже. 

var power = [],
  speed = [],
  torque = [],

  i = 0;
let time = 1542278447000;
for (i; i < 100; i += 1) {
  let torqueValue = Math.floor(Math.random() * (100 - 5 + 1)) + 5;
  let speedValue = Math.floor(Math.random() * (100 - 5 + 1)) + 5;
  powerValue = torqueValue * speedValue
  time = time + 1000
  torque.push([
    time, // the date
    torqueValue // the torque
  ]);
  speed.push([
    time, // the date
    speedValue // the speed
  ]);
  power.push([
    time, // the date
    powerValue // the power
  ]);
}

// create the chart
Highcharts.stockChart('container', {
  chart: {
    events: {
      load: function() {
        var chart = this,
          multiplier,
          dataLength,
          x,
          y;

        setInterval(function() {
          chart.series.forEach(function(series) {
            multiplier = series.dataMax;
            dataLength = chart.series[0].xData.length;
            x = chart.series[0].xData[dataLength - 1] + 1000;
            y = Math.round(Math.random() * multiplier);

            series.addPoint([x, y], false, true);
          });

          chart.xAxis[0].setExtremes(null, x + 15000);
        }, 1000);

      }
    }
  },
  rangeSelector: {
    enabled: false,
    selected: 2
  },
  navigator: {
    enabled: false
  },
  scrollbar: {
    enabled: false
  },

  title: {
    text: ''
  },
  exporting: {
    enabled: false
  },

  subtitle: {
    text: ''
  },

  xAxis: {
    title: {
      text: 'Time'
    },
    ordinal: false
  },

  yAxis: [{
    opposite: false,
    startOnTick: true,
    endOnTick: true,
    labels: {
      align: 'left',
      x: -22
    },
    title: {
      text: 'Torque',
      x: -15
    },
    height: '30%',
    offset: 0,
    lineWidth: 2,
    resize: {
      enabled: true
    }
  }, {
    opposite: false,
    labels: {
      align: 'left',
      x: -22
    },
    title: {
      text: 'Speed',
      x: -15
    },
    top: '33%',
    height: '30%',
    offset: 0,
    lineWidth: 2
  }, {
    opposite: false,
    labels: {
      align: 'left',
      x: -22
    },
    title: {
      text: 'Power',
      x: -15
    },
    top: '66%',
    height: '30%',
    offset: 0,
    lineWidth: 2
  }],

  legend: {
    enabled: true
  },
  tooltip: {
    split: true
  },

  credits: {
    enabled: false
  },

  plotOptions: {
    series: {}
  },

  series: [{
    color: '#77787b',
    type: 'spline',
    name: 'Torque',
    id: 'Power',
    zIndex: 2,
    data: torque
  }, {
    color: '#335572',
    type: 'spline',
    name: 'Speed',
    id: 'Speed',
    data: speed,
    yAxis: 1
  }, {
    color: '#ee4650',
    type: 'spline',
    name: 'Power',
    id: 'Power',
    data: power,
    yAxis: 2
  }]
});
.header {
  padding: 20px 20px 10px 0px;
  width: 100%;
  display: flex;
  font-size: 16px;
  color: #5e5e5e;
  font-family: 'Montserrat Medium', 'Montserrat Regular', 'Montserrat'
}

span {
  width: 50%;
  font-family: 'Montserrat Medium', 'Montserrat Regular', 'Montserrat'
}

span:last-child {
  text-align: right;
}
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/drag-panes.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/indicators/indicators.js"></script>
<script src="https://code.highcharts.com/stock/indicators/volume-by-price.js"></script>

<div class='header'>
  <span>
  Date: 15/11/2018
  </span>
  <span>
  Thrust: 3079.21 N
  </span>
</div>
<div id="container" style="height: 500px; min-width: 310px"></div>

Демонстрация:

Ссылка API:


ДОБАВЛЕНИЕ

Если вы хотите, чтобы он работал с включенным навигатором, установите те же крайности и на навигаторе xAxis и затем перерисовайте диаграмму (chart.redraw()).Обратите внимание, что он будет работать правильно, если у вас есть navigator.adaptToUpdatedData = false.

Код: 

  chart: {
    events: {
      load: function() {
        var chart = this,
            offset = 15000,
          multiplier,
          dataLength,
          x,
          y,
          min,
          max;

        setInterval(function() {
          chart.series.forEach(function(series) {
            multiplier = series.dataMax;
            dataLength = chart.series[0].xData.length;
            x = chart.series[0].xData[dataLength - 1] + 1000;
            y = Math.round(Math.random() * multiplier);

            series.addPoint([x, y], false, true);
          });

          min = chart.xAxis[0].userMin || null;
          min = min < chart.xAxis[0].dataMin ? null : min;

          max = x + offset;

          chart.xAxis[0].setExtremes(min, max, false);
          chart.navigator.xAxis.setExtremes(min, max, false);
          chart.redraw();
        }, 1000);

      }
    }
  }

Демо:

Ссылка API:

...