javascript - Highcharts:向图表添加线条会从 X 轴删除标签

Question

这是我的图表:

这是如果我添加一条线作为第一个系列的图表(请注意 x 轴上缺少标签):

由于某种原因，x 轴上的大多数点都消失了。

这是一个简化的案例:

$(function () {
    $('#container').highcharts({
        xAxis: {
			type: 'datetime'
		},
        series: [
			{
				type: 'line',
				data: [
					{ x: 1476749571000, y: 36581540.37153554 },
					{ x: 1477429910000, y: 36763124.20193958 }
				]
			},
			{
				type: 'scatter',
				data: [
					{ x: 1476749571000, y: 37170874 },
					{ x: 1476756736000, y: 36541961 },
					{ x: 1476760298000, y: 36412560 },
					{ x: 1476771158000, y: 36766829 },
					{ x: 1476774759000, y: 36819204 },
					{ x: 1476778351000, y: 36193069 },
					{ x: 1476781953000, y: 36289990 },
					{ x: 1476789144000, y: 36751180 },
					{ x: 1476796338000, y: 36058553 },
					{ x: 1476807129000, y: 36803593 },
					{ x: 1476810763000, y: 35963538 },
					{ x: 1476821507000, y: 36896693 },
					{ x: 1476825189000, y: 36187712 },
					{ x: 1476835902000, y: 37084673 },
					{ x: 1476843121000, y: 37136577 },
					{ x: 1476846735000, y: 36607531 },
					{ x: 1476853934000, y: 36334610 },
					{ x: 1476864716000, y: 37140192 },
					{ x: 1476875538000, y: 35929136 },
					{ x: 1476900734000, y: 36137618 },
					{ x: 1476907888000, y: 37195952 },
					{ x: 1476915103000, y: 37170028 },
					{ x: 1476922333000, y: 36438640 },
					{ x: 1476936739000, y: 36425736 },
					{ x: 1476951130000, y: 36954993 },
					{ x: 1476969138000, y: 36288051 },
					{ x: 1476972690000, y: 36666854 },
					{ x: 1476976353000, y: 37066932 },
					{ x: 1476979924000, y: 36628386 },
					{ x: 1476990726000, y: 36997524 },
					{ x: 1477005114000, y: 37036777 },
					{ x: 1477008734000, y: 36069816 },
					{ x: 1477019586000, y: 36788879 },
					{ x: 1477026712000, y: 37195266 },
					{ x: 1477030349000, y: 36568077 },
					{ x: 1477033944000, y: 35936353 },
					{ x: 1477041102000, y: 35840667 },
					{ x: 1477069967000, y: 36826033 },
					{ x: 1477077134000, y: 37165725 },
					{ x: 1477084331000, y: 37078309 },
					{ x: 1477091521000, y: 37195750 },
					{ x: 1477095153000, y: 36788377 },
					{ x: 1477105972000, y: 36951953 },
					{ x: 1477109539000, y: 37072255 },
					{ x: 1477113124000, y: 35688693 },
					{ x: 1477120378000, y: 37021539 },
					{ x: 1477134712000, y: 36883044 },
					{ x: 1477138302000, y: 36838067 },
					{ x: 1477141938000, y: 36719537 },
					{ x: 1477145571000, y: 35900066 },
					{ x: 1477149173000, y: 36141158 },
					{ x: 1477156353000, y: 36647699 },
					{ x: 1477163535000, y: 36516520 },
					{ x: 1477167130000, y: 35817224 },
					{ x: 1477181544000, y: 36758274 },
					{ x: 1477188754000, y: 36717498 },
					{ x: 1477195935000, y: 36913901 },
					{ x: 1477203152000, y: 36518492 },
					{ x: 1477217518000, y: 37143381 },
					{ x: 1477224743000, y: 36334856 },
					{ x: 1477231914000, y: 36910162 },
					{ x: 1477249968000, y: 36977544 },
					{ x: 1477257157000, y: 37174847 },
					{ x: 1477267956000, y: 37051864 },
					{ x: 1477289539000, y: 36343981 },
					{ x: 1477296761000, y: 37020845 },
					{ x: 1477300357000, y: 36180803 },
					{ x: 1477307506000, y: 36145191 },
					{ x: 1477311156000, y: 37102437 },
					{ x: 1477325543000, y: 35496804 },
					{ x: 1477332732000, y: 37193777 },
					{ x: 1477339942000, y: 36683704 },
					{ x: 1477354323000, y: 36577391 },
					{ x: 1477357932000, y: 36231277 },
					{ x: 1477361539000, y: 37198585 },
					{ x: 1477365133000, y: 36789070 },
					{ x: 1477379517000, y: 37138966 },
					{ x: 1477386738000, y: 36953176 },
					{ x: 1477397539000, y: 37135591 },
					{ x: 1477408304000, y: 35867866 },
					{ x: 1477411936000, y: 37141581 },
					{ x: 1477415513000, y: 36864017 },
					{ x: 1477422756000, y: 36743302 },
					{ x: 1477426328000, y: 36948156 },
					{ x: 1477429910000, y: 37199122 }
				]
			}
		]
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

有什么想法吗？

Answer 1

Highcarts 对 line 和 scatter 系列类型之间的解释似乎存在差异，尽管我不清楚如何解释特定场景。

但是您可以通过对两者使用line 系列来解决此问题，并且只需从散点数据中删除该线即可。

这样，您就可以跳过设置 tickInterval，并通过您想要的图表获得动态解释。

示例:

{
  type: 'line',
  lineWidth: 0,
  marker: {
    enabled: true
  },
  findNearestPointBy: 'xy',
  data: [ ... ]
}

更新了 fiddle :

• http://jsfiddle.net/jlbriggs/g6fjjach/4/