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

请看看

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

Answer 2

Highcharts仅在两个后续的无空点之间绘制一条线。单点可以显示为标记（您在代码中禁用）。

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

高图表折线图，缺少数据

2 个答案: