javascript - 删除 HighChart 图表上的间距？

Question

我有一个图表，其中包含从 xml 文件中提取的数据。而且出于某种原因我无法摆脱间距。如果需要，我会将我的代码放在一起并将其发布在http://jsfiddle.net上

****************************解决方案:******************** **************

好吧，很抱歉我仍然无法让它在 JSFiddle 上工作，但这是我对代码所做的。希望有一天这会对其他人有所帮助。

这是我的原始代码:

$(document).ready(function() {
        var options = {
            chart: {
                renderTo: 'container',
                type: 'column', 
            },
            title: {
                text: 'Donations'
            },
            xAxis: {                    
                categories: [],
                startOnTick: false,
            },
            yAxis: {
                title: {
                    text: 'Money $'
                }

            },              
            plotOptins: {
                column: {
                    size:'150%'
                }
            },
            legend: {
            enabled: false,           
        },
            series: []
        };

        // Load the data from the XML file 
        $.get('data.xml', function(xml) {
            // Split the lines
            var $xml = $(xml);              
            // push categories
            $xml.find('stock symbol').each(function(i, category) {options.xAxis.categories.push($(category).text());    
            });     
            // push series
            $xml.find('stock').each(function(i, series) {
                var seriesOptions = {
                    name: $(series).find('symbol').text(),
                    data: []
                };

                // push data points
                $(series).find('price').each(function(i, point) {
                    seriesOptions.data.push(
                        parseInt($(point).text())
                    );
                });

                // add it to the options
                options.series.push(seriesOptions);
            });
            var chart = new Highcharts.Chart(options);

        });
    });

这是我的新代码:

$(document).ready(function() {
        var options = {
            chart: {
                renderTo: 'container',
                type: 'column',     
            },
            title: {
                text: 'Donations'
            },
            xAxis: {                    
        categories: [],
            },
            yAxis: {
                title: {
                    text: 'Money $'
                }

            },
            plotOptins: {
                column: {
                    size:'150%'
                }
            },
            legend: {
            enabled: false,
        },
            series: []
        };

        // Load the data from the XML file 
        $.get('data.xml', function(xml) {
            // Split the lines
            var $xml = $(xml);

            // push categories
            $xml.find('stock symbol').each(function(i, category) {
                options.xAxis.categories.push(i);                           
            });         
                var seriesOptions = {
                    //name: $(series).find('symbol').text(),
                    data: []
                };
            // push series              
            $xml.find('stock').each(function(i, series) {
                // push data points
                $(series).find('price').each(function(i, point) {
                    seriesOptions.data.push(parseInt($(point).text())
                    );
                });                 
                // add it to the options

            }); options.series.push(seriesOptions);
            var chart = new Highcharts.Chart(options);
        });


    });

Answer 1

解决方案是使用组填充。如果您将其添加到图表选项中，它将删除左侧和右侧的间距。

请参阅下面的示例，其中我添加了 groupPadding: 0

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'column', 
    },
    plotOptions: {
        series: {
            groupPadding: 0
        }
    },
    ...
)};