Highcharts-线图标记渲染不可靠?
我尝试在每个数据点(除了连接数据点的线之外)做一个带有标记的Highcharts折线图。看起来很简单(Highcharts确实提供了工作示例),但我发现我的六个系列中有三个没有包括标记。以下是我的标记/代码:Highcharts-线图标记渲染不可靠?,highcharts,Highcharts,我尝试在每个数据点(除了连接数据点的线之外)做一个带有标记的Highcharts折线图。看起来很简单(Highcharts确实提供了工作示例),但我发现我的六个系列中有三个没有包括标记。以下是我的标记/代码: <!DOCTYPE HTML> <html> <head> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
title: {text: 'Things and Stuff',x: -18} ,
xAxis: {
title: {text: 'Whatsits'},
plotLines: [{value: 0,width: 1,color: '#808080'}]
},
yAxis: {
title: { text: 'Widgets'},
plotLines: [{value: 0,width: 1,color: '#808080'}]
},
legend: {layout: 'vertical',align: 'right',verticalAlign: 'middle',borderWidth: 0},
series:[
{"name":"One - FAIL","data":[{"x":2800,"y":447420},{"x":3185,"y":461433},{"x":3190,"y":465400},{"x":3253,"y":473330}],"marker":{"radius":8}},
{"name":"Two - FAIL","data":[{"x":2417,"y":314903},{"x":2420,"y":332900},{"x":2463,"y":312903},{"x":2602,"y":333900},{"x":2675,"y":329930},{"x":2796,"y":350900},{"x":2841,"y":334900},{"x":2857,"y":352900}],"marker":{"radius":8}},
{"name":"Three - PASS","data":[{"x":3022,"y":454900},{"x":3084,"y":469900},{"x":3257,"y":474900},{"x":3340,"y":484900}],"marker":{"radius":8}},
{"name":"Four - PASS","data":[{"x":3255,"y":458311},{"x":3417,"y":467290},{"x":3604,"y":474000},{"x":3768,"y":474490}],"marker":{"radius":8}},
{"name":"Five - PASS","data":[{"x":2672,"y":414990},{"x":3043,"y":441990},{"x":3146,"y":450990},{"x":3253,"y":436990},{"x":3667,"y":443990},{"x":4217,"y":460990}],"marker":{"radius":8}},
{"name":"Six - FAIL","data":[{"x":3022,"y":447900},{"x":3084,"y":457900},{"x":3254,"y":514900},{"x":3257,"y":462900},{"x":3340,"y":472900},{"x":3469,"y":539900},{"x":3584,"y":539900},{"x":3586,"y":524900},{"x":3916,"y":539900}],"marker":{"radius":8}},
],
});
});
</script>
</head>
<body>
<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>
</body>
</html>
$(函数(){
$(“#容器”)。高图({
标题:{text:'Things and Stuff',x:-18},
xAxis:{
标题:{text:'Whatsits'},
绘图线:[{值:0,宽度:1,颜色:'#808080'}]
},
亚克斯:{
标题:{text:'Widgets'},
绘图线:[{值:0,宽度:1,颜色:'#808080'}]
},
图例:{layout:'vertical',align:'right',verticalAlign:'middle',borderWidth:0},
系列:[
{“名称”:“一次失败”,“数据”:[{“x”:2800,“y”:447420},{“x”:3185,“y”:461433},{“x”:3190,“y”:465400},{“x”:3253,“y”:473330}],“标记”:{“半径”:8},
{“name”:“Two-FAIL”,“data”:[{“x”:2417,“y”:314903},{“x”:2420,“y”:332900},{“x”:2463,“y”:312903},{“x”:2602,“y”:333900},{“x”:2675,“y”:329930},{“x”:2796,“y”:350900},{“x”:2841,“y”:334900},{“x”:2857,“y”:352900},{“marker”:{“radius”:8},
{“名称”:“三通”,“数据”:[{“x”:3022,“y”:454900},{“x”:3084,“y”:469900},{“x”:3257,“y”:474900},{“x”:3340,“y”:484900}],“标记”:{“半径”:8},
{“name”:“Four-PASS”,“data”:[{“x”:3255,“y”:458311},{“x”:3417,“y”:467290},{“x”:3604,“y”:474000},{“x”:3768,“y”:474490}],“marker”:{“radius”:8},
{“名称”:“五通”,“数据”:[{“x”:2672,“y”:414990},{“x”:3043,“y”:441990},{“x”:3146,“y”:450990},{“x”:3253,“y”:436990},{“x”:3667,“y”:443990},{“x”:4217,“y”:460990},{“标记”:{“半径”:8},
{“名称”:“六次失败”,“数据”:[{“x”:3022,“y”:447900},{“x”:3084,“y”:457900},{“x”:3254,“y”:514900},{“x”:3257,“y”:462900},{“x”:3340,“y”:472900},{“x”:3469,“y”:539900},{“x”:3584,“y”:539900},{“x”:3586,“y”:524900},{“x”:3916,“y”:539900},{“x”:539900},{“x”:539900},{,
],
});
});
根据我的观察,名字中带有“FAIL”的连续剧最终没有标记。这在IE和Chrome中也是如此。在Chrome中,如果你放大,我认为标记确实开始(几乎)出现
有趣的是,如果您将鼠标悬停在标记应该位于的位置上,即如果调到数据点的工具提示,标记确实会显示
知道发生了什么吗?对我来说,这似乎是无法解释的(例如,库中有一个bug),但我对Highcharts还是相当陌生的
谢谢 我认为Highcharts在理解您的数据方面是“失败的”。要使标记出现在每个系列中,您需要通过添加以下内容来强制启用标记:
plotOptions: {
line : {
marker : {
enabled : true,
}
}
}
到您的图表配置
正如政府所说:
已启用:布尔值
启用或禁用点标记。如果为null,则当数据密集时,标记将隐藏,并显示更广泛的数据点。默认为空
对于Highcharts,您的数据是密集的,这就是为什么它在某些系列中隐藏标记