Линейный график High Charts с отсутствующими данными

Question

Я использую High Charts и линейную диаграмму для визуализации.У меня есть некоторые плохие данные в данных серии, которые заменяются на нули, и моя линия на тренде не связана (плохие данные не отображаются на графике, следовательно, отключена линия), что нормально.

Моя проблемачто у меня есть хорошие данные между некоторыми плохими данными, такими как (плохие, плохие, хорошие , плохие, плохие, хорошие , плохие) эти хорошие данные отображаются в качестве подсказок для моего трендано данные не отображаются на графике.Есть ли какая-либо опция конфигурации с высокими графиками, чтобы я мог строить отдельные точки данных вместе с отключенной линией?

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

Вот как я инициализирую свою старшую диаграмму

 initializeChart() {
Highcharts.setOptions({global: { useUTC : false }});
let yAxesLoc = this.getYAxes(this.props.signals);
// Update the yAxes to use the unit abbrevation instead of the full name
let dfdArr = new Array();
yAxesLoc.forEach(function(yAxis) {
  if(!yAxis.unitName) {
    return;
  }
  dfdArr.push(AfModel.GetUnitByName(yAxis.unitName, function(unit) { 
    if (unit) {
      yAxis.unit = unit.Abbreviation;
      yAxis.title = {text: unit.Abbreviation};
    }
  }));
});
let that = this; 
// Only all the units are loaded, then we initialize Highcharts
return $.when.apply(null, dfdArr)
.always(function() {
  that.yAxes = yAxesLoc; // Set all the axis
  that.colorGenerator = new ColorGenerator(); // Initialize a new color generator for this trend
  that.chart = Highcharts.chart(that.state.chartDivId, {
    credits: {
      enabled: false
    },
    title: null,
    chart: {
      zoomType:'xy',
      events: {
        redraw: function(){
          // Remove all frozen tooltips
          if (that.cloneToolTip) {
            that.chart.container.firstChild.removeChild(that.cloneToolTip);
            that.cloneToolTip = null;
          }
          if (that.cloneToolTip2) {
              that.cloneToolTip2.remove();
              that.cloneToolTip2 = null;
          }
        }
      }
    },
    xAxis: {
      type:'datetime',
      min: that.props.startDateTime.getTime(),
      max: that.props.endDateTime.getTime(),
      labels: {
        rotation: 315,
        formatter: function() {
          return new Date(this.value).toString('dd-MMM-yy HH:mm')
        }
      }
    },
    tooltip: {
        shared: true,
        crosshairs: true,
        valueDecimals: 2,
        formatter: function(tooltip) { 
          return HcUtils.interpolatedTooltipFormatter.call(this, tooltip, function(yVal, series) {
            return NumberUtils.isNumber(yVal) ? 
                    (series.yAxis.userOptions.unit) ?
                       NumberUtils.round(yVal, 4) + " " + series.yAxis.userOptions.unit 
                    : NumberUtils.round(yVal, 4)
                  : yVal;
          }); 
        }
      },
    yAxis: that.yAxes,
    series: {
      animation: false,
      marker: {enabled: false}
    },
    plotOptions: {
      line: {
        animation: false,
        marker: {
          enabled:false
        }            
      },
      series: {             
          connectNulls: false,
          connectorAllowed: false,
          cursor: 'pointer',
          point: {
              events: {
                  // This event will freeze the tooltip when the user clicks
                  // Inspired by https://stackoverflow.com/questions/11476400/highcharts-keep-tooltip-showing-on-click
                  click: function() { 
                    if (that.cloneToolTip) {
                      that.chart.container.firstChild.removeChild(that.cloneToolTip);
                    }
                    if (that.cloneToolTip2) {
                        that.cloneToolTip2.remove();
                    }
                    that.cloneToolTip = this.series.chart.tooltip.label.element.cloneNode(true);
                    that.chart.container.firstChild.appendChild(that.cloneToolTip);

                    that.cloneToolTip2 = $('.highcharts-tooltip').clone(); 
                    $(that.chart.container).append(that.cloneToolTip2);
                  }
              }
          }
      }
    }
  });
})

}

Просьба предложить.

Спасибо.

Answer 1

Highcharts рисует линию только между двумя последующими нулевыми точками.Отдельные точки можно визуализировать как маркеры (которые вы отключили в своем коде).

Вот демоверсия live , показывающая эту проблему: http://jsfiddle.net/BlackLabel/khp0e8qr/

  series: [{
    data: [1, 2, null, 4, null, 1, 7],
    marker: {
        //enabled: false // uncomment to hide markers
    }
  }]

Ссылка API: https://api.highcharts.com/highcharts/series.line.marker

Answer 2

В последней версии Highcharts кажется, что она отлично работает.Точки данных видны.

Пожалуйста, посмотрите

Visible points: https://codepen.io/samuellawrentz/pen/XqLZop?editors=0010