javascript - Highcharts 面积图用一个数据点隐藏图表

Question

我有一个产品，我们的客户可以在其中选择日期范围。对于我们的其中一个工具，我们将它们制作成带有数据高位图的面积图。

我注意到，当面积图在 x 轴上有一个数据点时，不会显示任何图形。这是 JSFiddle 中的示例: http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/area-basic/

后代代码如下:

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'area'
        },
        title: {
            text: 'US and USSR nuclear stockpiles'
        },
        subtitle: {
            text: 'Source: <a href="http://thebulletin.metapress.com/content/c4120650912x74k7/fulltext.pdf">'+
                'thebulletin.metapress.com</a>'
        },
        xAxis: {
            allowDecimals: false,
            labels: {
                formatter: function() {
                    return this.value; // clean, unformatted number for year
                }
            }
        },
        yAxis: {
            title: {
                text: 'Nuclear weapon states'
            },
            labels: {
                formatter: function() {
                    return this.value / 1000 +'k';
                }
            }
        },
        tooltip: {
            pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>warheads in {point.x}'
        },
        plotOptions: {
            area: {
                pointStart: 1940,
                marker: {
                    enabled: false,
                    symbol: 'circle',
                    radius: 2,
                    states: {
                        hover: {
                            enabled: true
                        }
                    }
                }
            }
        },
        series: [{
            name: 'USA',
            data: [10104 ]
        }, {
            name: 'USSR/Russia',
            data: [16000]
        }]
    });
});

奇怪的是:图表是空的，但是当您将鼠标悬停在图表上时，您可以看到数据点。有什么办法可以让这些点在不悬停在它们上面的情况下可见吗？也许是一个给刻度宽度的选项？

谢谢!

Answer 1

在您的示例中，当我删除除最后一个数据点以外的所有数据点时，我明白您在说什么。这是因为在此示例中 marker未启用。为此，将其更改为 true:

    plotOptions: {
        area: {
            pointStart: 1940,
            marker: {
                enabled: true, //this was false.
                symbol: 'circle',
                radius: 2,
                states: {
                    hover: {
                        enabled: true
                    }
                }
            }
        }
    },