Javascript 删除HighChart图形上的间距？
我有一个从xml文件中提取数据的图表。由于某种原因，我无法消除间距。如果需要的话，我会把我的代码放在一起，然后贴在上面 ***************************解决方案：********************************* 好的，很抱歉，我仍然无法在JSFIDLE上使用它，但下面是我对代码所做的。希望有一天这会帮助别人 这是我的原始代码：Javascript 删除HighChart图形上的间距？,javascript,jquery,html,ajax,highcharts,Javascript,Jquery,Html,Ajax,Highcharts,我有一个从xml文件中提取数据的图表。由于某种原因，我无法消除间距。如果需要的话，我会把我的代码放在一起，然后贴在上面 ***************************解决方案：********************************* 好的，很抱歉，我仍然无法在JSFIDLE上使用它，但下面是我对代码所做的。希望有一天这会帮助别人 这是我的原始代码： $(document).ready(function() { var options = {
$(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);
});
});
$(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);
});
});
解决方案是使用组填充。如果将其添加到图表选项中，将删除左侧和右侧的间距 请参见下面的示例，其中我添加了groupPadding:0
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
},
plotOptions: {
series: {
groupPadding: 0
}
},
...
)};
解决方案是使用组填充。如果将其添加到图表选项中，将删除左侧和右侧的间距 请参见下面的示例，其中我添加了groupPadding:0
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
},
plotOptions: {
series: {
groupPadding: 0
}
},
...
)};
把它放到桌子上。这样人们就可以看到你到目前为止做了什么。现在就开始做吧。谢谢，您是否尝试将x轴的起始点更改为第一个值？抱歉，无法让它在JSFIDLE上工作，所以我在这里发布了代码：Yes@abepertillo，但它不工作。但我只是发布了我的示例，希望您可以查看源代码，看看发生了什么。谢谢把它放在JSFIDLE上。这样人们就可以看到你到目前为止做了什么。现在就开始做吧。谢谢，您是否尝试将x轴的起始点更改为第一个值？抱歉，无法让它在JSFIDLE上工作，所以我在这里发布了代码：Yes@abepertillo，但它不工作。但我只是发布了我的示例，希望您可以查看源代码，看看发生了什么。谢谢