代码之家 › 专栏 › 技术社区 › James

高位图表中绘图线上方的空白区域

highcharts javascript

1

James · 技术社区 · 8 年前

我使用Highcharts(Highstock)在我的页面上呈现图表。

我为我的轴指定了一个最大值和最小值,但尽管如此,我还是在图形上方留下了空白:

这就是我目前的选择:

var myChart = new Highcharts.Chart('container', {
    rangeSelector:{
        enabled: false
    },
    credits: {
        enabled: false
    },
    legend: {
        enabled: true,
    },
    yAxis: [{
        opposite: false,
        title: {
            text: 'Gravity'
        },
        min: 1,
        max: items.options.gravity_max + 0.01
    },
    {
        opposite: true,
        title: {
            text: 'Temperature (C)'
        },
        min: items.options.temperature_min - 1,
        max: items.options.temperature_max + 1
    }],
    navigator: {
        enabled: false,
    },
    scrollbar: {
        enabled: false
    },
    series: [{
        name: 'Temperature',
        data: items.temperature,
        dataGrouping: {
            enabled: true
        },
        yAxis: 1,
    }, {
        name: 'Gravity',
        data: items.specific_gravity,
        dataGrouping: {
            enabled: true
        }
    },
    {
        name: 'OG',
        data: items.original_gravity,
        dataGrouping: {
            enabled: true
        },
        dashStyle: 'dot',
        color: '#000'
    },
    {
        name: 'FG',
        data: items.final_gravity,
        dataGrouping: {
            enabled: true
        },
        dashStyle: 'dot',
        color: '#000'
    }]
});

这里有一个链接,可以用来摆弄数据的简化版本; http://jsfiddle.net/3eLrn61w/

是什么造成了上面的空白,我该如何消除它?

1 回复 | 直到 8 年前

1

2

Halvor Holsten Strand mtorres 8 年前

这是因为默认情况下,Highcharts将尝试在标签上开始和结束一个轴。你现在的最大值是 1.071+0.01 ( 1.081 ). 这不仅仅是的标签检查点 1.075 ,这将导致制作另一个标签。

你可以这样做来解决这个问题( JSFiddle example ):

yAxis: [{
    // ...
    endOnTick: false
}]

您可能需要评估的其他几个选项是匹配 axis.startOnTick: false ,可能是 axis.maxPadding: 0 避免创建边缘需要的标签 chart.alignTicks: false

另一种方法是改变刻度位置( axis.tickPositions 或 axis.tickPositioner

或者你的第三个选择是改变你的手写轴的最大值( max: items.options.gravity_max + 0.01 ),这样它就不会通过 max: 1.074

不过,我认为你最好的选择是 startOnTick 和 endOnTick 选项。