Highcharts多面板和滚动条 [英] Highcharts Multi-Panes and Scrollbar

问题描述

如何添加具有多窗格的滚动条?

How to add a scroll with multi-panes?

请查看小提琴，第三个窗格是重叠的

Please look at the fiddle, 3rd pane is overlapping

yAxis: [{
    title: { text: 'Coffee Cups'},
    height: '60%',
    offset: 0,
    lineWidth: 2
  }, {
    title: { text: 'Hazelnut Cups' },
    top: '65%',
    height: '60%',
    offset: 0,
    lineWidth: 2
  }, {
    title: { text: 'Choco Cups' },
    top: '130%',
    height: '60%',
    offset: 0,
    lineWidth: 2
  }]

注意:在我的情况下，它可以是100个多窗格.

Note: In my scenario, it can be 100 multi panes.

推荐答案

y轴的高度之和大于100%，这会导致重叠.您不应超过100％:

The sum of the heights of your y-axes is more than 100% which causes the overlapping. You should not exceed 100%:

        yAxis: [{
            labels: {
                align: 'right',
                x: -3
            },
            title: {
                text: 'Coffee Cups'
            },
            height: '33.33%',
            offset: 0,
            lineWidth: 2
        }, {
            labels: {
                align: 'right',
                x: -3
            },
            title: {
                text: 'Hazelnut Cups'
            },
            top: '33.33%',
            height: '33.33%',
            offset: 0,
            lineWidth: 2
        }, {
            title: {
                text: 'Hazelnut Cups'
            },
            top: '66.66%',
            height: '33.33%',
            offset: 0,
            lineWidth: 2
        }]

实时演示: http://jsfiddle.net/BlackLabel/g7uto6xc/

API参考: https://api.highcharts.com/highstock/yAxis.height

经过大量自定义后，达到了想要的结果:

After a lot of customizations, the wanted result was achieved:

实时演示: http://jsfiddle.net/BlackLabel/u293pvnj/

这篇关于Highcharts多面板和滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！