Question

我正在尝试在每个数据点处使用带标记的Highcharts线图（除了连接数据点的线之外）。看起来很容易（而Highcharts确实提供了工作示例），但我发现我的六个系列中的三个“情节”都不包括标记。这是我的标记/代码：

<!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>

在我的观察中，名字中带有“FAIL”的系列并没有最终有标记。在IE和Chrome中也是如此。在Chrome中，如果你缩小方式，我认为标记确实已经开始（几乎没有）出现。

有趣的是，如果你将鼠标悬停在它们应该存在的位置，那么标记 do 就会显示出来，即如果你提到数据点的工具提示。

知道发生了什么事吗？对我来说，这似乎是莫名其妙的（即图书馆中的一个错误），但我对Highcharts很新。

谢谢！

Answer 1

我认为Highcharts在理解您的数据方面“失败”。要使标记显示在每个系列中，您需要通过添加以下内容强制它们启用：

plotOptions: {
    line : {
        marker : {
            enabled : true,
        }
    }
}

到图表配置。

正如documentation所说：

enabled：Boolean

启用或禁用点标记。如果为null，则在数据密集时隐藏标记，并显示更广泛的数据点。默认为null。

对于Highcharts，您的数据非常密集，这就是为什么它会隐藏某些系列中的标记。

Highcharts - 线图标记渲染不可靠？

1 个答案: