css - HighCharts-删除条形图的填充

标签 css highcharts

我正在使用条形图(具有百分比堆叠)构建进度条,并希望删除容器中的空格/填充,并仅保留图表容器中没有任何填充/边距空间的条。

有没有办法做到这一点?

Fiddle

代码:

$(function () {
    var chart;
    $(document).ready(function () {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'bar'
            },
            legend: {
                enabled: false,
            },
            title: {
                text: ''
            },
            xAxis: {

                lineWidth: 0,

                labels: {
                    enabled: false
                },
                minorTickLength: 0,
                tickLength: 0
            },
            yAxis: {
                min: 0,
                title: {
                    text: ''
                },
                lineWidth: 0,
                gridLineWidth:0,
                lineColor: 'transparent',
                labels: {
                    enabled: false
                },
                minorTickLength: 0,
                tickLength: 0
            },
            tooltip: {
                enabled: false
            },
            plotOptions: {
                bar: {
                    stacking: 'percent'

                },
                 series: {
            pointPadding: 0,
            groupPadding: 0,       
        }
            },

            series: [{
                name: 'max',
                data: [40],
                color: 'white'
            }, {
                name: 'current',
                data: [60],
                color: 'green'
            }]
        });
    });

});

最佳答案

您可以简单地删除边距:

chart: {
    renderTo: 'container',
    ....
    margin: 0
}

参见:http://jsfiddle.net/gRYGn/4/

关于css - HighCharts-删除条形图的填充,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14811145/

相关文章:

css - calc() 返回百分比,而不是像素?

css - 使用 modernizer,我怎样才能为 css3 动画提供回退,回退到 flash?

javascript - 如何从 Highcharts 区域类别图表的两侧删除填充?

javascript - 如果 dataLabel 的宽度大于 highCharts 中条形的高度,则禁用 dataLabel

javascript - Highcharts 中存在多个系列数据,但第二条线图显示被压扁?

php - 按钮选择要使用的样式表

css - TailwindCSS Flexbox 导航栏链接未内联显示

javascript - Highcharts 气泡图中心点

javascript - Highcharts + Plotband 工具提示悬停 + 默认样式

css - 三个页面使用一个母版页 CSS 问题