缺少数据的 Highcharts 折线图

Question

我正在使用 High Charts 并使用折线图进行可视化。我在系列数据中有一些坏数据被空值替换，我的趋势线没有连接（坏数据没有绘制在趋势上，因此线断开）这很好。

我的问题是我在一些坏数据之间有一些好数据，例如 (bad,bad,good,bad,bad,good, bad) 这个好的数据显示为我的趋势的工具提示，但趋势上没有显示数据点。在高图表中是否有任何配置选项，以便我可以绘制单个数据点以及断开的线？

正如您在趋势图中看到的那样，线系列已断开，但在趋势图上看不到的不良数据点中仍有一些有效数据点。

这是我初始化高图的方法

 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 
                  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 中运行良好。数据点可见。

请看

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

Answer 2

Highcharts 仅在两个连续的非空点之间绘制一条线。单个点可以可视化为 markers（您在代码中禁用了它）。

这是一个显示此问题的现场演示：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

缺少数据的 Highcharts 折线图

High Charts Line Chart with missing data

line

points

highcharts