从条形图中删除填充 Highcharts.js答案

【问题标题】：Remove padding from barcharts Highcharts.js从条形图中删除填充 Highcharts.js
【发布时间】：2017-03-09 07:18:27
【问题描述】：

我正在使用 highcharts.js 构建条形图，有时包含数百个数据点（条形图）。如何删除 highcharts.js 在每个条上放置的白色填充？看看这个fiddle 看看我正在谈论的现象。我尝试在系列对象中设置groupPadding: 0，但条形之间仍有一些填充/边距。还有什么我可以做的吗？也许 highcharts.js 是这种情节的错误库？欢迎任何建议，谢谢！

$(function () {
 $('#container').highcharts({
    chart: {
        type: 'column',
        zoomType: 'x'
    },
    title: {
        text: 'Monthly Average Rainfall'
    },
    subtitle: {
        text: 'Source: WorldClimate.com'
    },
    xAxis: {
        categories: dates ,
        crosshair: true,
        crosshair: true,
        minTickInterval: 24
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Rainfall (mm)'
        }
    },
    tooltip: {
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
    },
    plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 0
        }
    },
    series: [{
        name: 'Tokyo',
        data: ticks,
        groupPadding: 0

    }]
 });
});

【问题讨论】：

标签： javascript css highcharts padding

【解决方案1】：

在这里找到答案：http://www.highcharts.com/docs/chart-and-series-types/column-chart

上面的文档显示了如何将所有间距归零，我已经对你的小提琴做了这个，所以现在没有间隙了。要更新的代码是您的 plotOptions 调用并保持您的 stacking: 'percent' 调用：

plotOptions: {
    column: {
        pointPadding: 0,
        borderWidth: 0,
        groupPadding: 0,
        shadow: false,
        stacking: 'percent'
    }
}

对于任何服务，请务必查看他们的文档，他们可能已经处理了您能想到的大多数问题。通常。 :)

【讨论】：

完美，正是我想要的。谢谢@Nathaniel Flick
不客气@WebDeveloper102，我很高兴能帮上忙。