删除HighChart图表上的间距?

时间:2013-03-14 01:02:18

标签: javascript jquery html ajax highcharts

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

Chart spacing

*************************** SOLUTION:****************** ***************

好的我很抱歉我仍然无法在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);
        });


    });

1 个答案:

答案 0 :(得分:1)

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

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

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