1

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);
        });


    });
4

1 に答える 1

1

解決策は、グループのパディングを使用することです。これをグラフオプションに追加すると、左側と右側の間隔が削除されます。

groupPaddingを追加した以下の例を参照してください:0

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'column', 
    },
    plotOptions: {
        series: {
            groupPadding: 0
        }
    },
    ...
)};
于 2013-03-14T03:53:14.667 に答える