0

我遇到了 highchart 的问题，我希望我的图表能够根据需要占据整个空间，但是数据和我的 div 顶部之间总是有一个空格。

如果我的小提琴在这里：http: //jsfiddle.net/w2bz5/35/

这是我的 javascript 代码：

jQuery(function () {
    jQuery('#container').highcharts({
            chart: {
                type: 'column',
                backgroundColor: '#3d3d3d',
                margin: [0, 0, 0, 0],
                width: 100,
                height: 100,
            },
            title: {
                text: null,
                margin: 0,
                floating: true,
                verticalAlign: 'bottom',
                x: 0,
                y: 0
            },
            plotOptions: {
                column: {
                    stacking: 'normal',
                    dataLabels: {
                        enabled: false
                    }
                }
            },
            yAxis: {
                title: {
                    text: null,
                    margin: 0
                },
                labels: {
                    enabled: false
                },
                gridLineWidth: 0,
                lineWidth: 0,
                minorGridLineWidth: 0,
                lineColor: 'transparent',
                minorTickLength: 0,
                tickLength: 0
            },
            tooltip: {
                enabled: false
            },
            xAxis: {
                title: {
                    text: null
                },
                labels: {
                    enabled: false
                },
                gridLineWidth: 0,
                lineWidth: 0,
                minorGridLineWidth: 0,
                lineColor: 'transparent',
                minorTickLength: 0,
                tickLength: 0
            },
            legend: {
                enabled: false
            },
            credits: {
                enabled: false
            },
            series: [{
                data: [1298],
                color: '#00FF00',
                borderColor: null
            }, {
                data:[4302],
                color: '#FF0000',
                borderColor: null
            }]
        });
    });

提前致谢 ！

斯奈特

4

2 回答 2

4

您需要将stacking设置为percent，而不是normal。

plotOptions: {
    column: {
       stacking: 'percent',
       dataLabels: {
          enabled: false
       }
    }
},

文档：高图表文档

正常堆叠假设每列会有不同的值，这意味着您将有不同大小的列 - 这就是它在顶部留下空间的原因。将其设置为百分比意味着每列都将具有相同的高度，而不管它包含的值如何。

附带说明一下，如果您打算将它们保持在这么小的范围内，那么导出按钮将会妨碍图表。您可以通过将其添加到您的选项列表中来删除它。

exporting: {
    enabled: false  
}

小提琴链接

于 2013-07-12T20:45:25.403 回答
0

您还可以将maxPadding和spacingTop设置为 0，然后设置max值。

http://jsfiddle.net/sbochan/w2bz5/37/

于 2013-07-15T12:14:43.020 回答