Question

当绘制折线等于yAxis.min值的折线图时，该线隐藏在X轴下方。

我将Y轴最小值设置为0，数据集包含零

以下是一个例子：

$(function () {
        $('#container').highcharts({
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },
            yAxis: {
                min: 0,
                max: 100
            },
            series: [{
                name: 'Tokyo',
                data: [7.0, 6.9, 0, 0, 0, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
            }]
        });
    });

http://jsfiddle.net/egQH8/1/

如果我将值增加到0.2，则只能看到开始显示的行：http://jsfiddle.net/2RCdV/1/

我能做些什么来解决这个问题吗？

Answer 1

删除min: 0并添加startOnTick: false。

这将使Highcharts自动计算最小值，因为它不再在刻度线上开始，它将在xAxis上方几个像素处绘制0 yAxis线。

看到它正在运行here。

Answer 2

我们为4px行解决了这个问题：

// This fixes the "thin lines at top & bottom of chart" bug
Highcharts.wrap(Highcharts.Chart.prototype, 'setChartSize', function (proceed) {
    proceed.apply(this, [].slice.call(arguments, 1));
  if (includes(['line','spline'], get(this, 'options.chart.type'))) {
    this.clipBox.height += 6;
    this.clipBox.y -= 3;
  }
});

Highcharts - 如何强制折线图在X轴上方可见

2 个答案: