Javascript Highcharts-柱的中心位置
我有一个Highcharts柱形图,我试图减少X轴上每一列之间的距离,同时将它们拉向中心,使这些列看起来更分组 例如,在我上面的例子中,红色和蓝色的柱会更靠近,并且朝向中心 下面是我的图表配置。seriesData参数只是我在渲染时传入的自定义对象 chartConfig.jsJavascript Highcharts-柱的中心位置,javascript,highcharts,Javascript,Highcharts,我有一个Highcharts柱形图,我试图减少X轴上每一列之间的距离,同时将它们拉向中心,使这些列看起来更分组 例如,在我上面的例子中,红色和蓝色的柱会更靠近,并且朝向中心 下面是我的图表配置。seriesData参数只是我在渲染时传入的自定义对象 chartConfig.js function chartConfig(seriesData) { return { barColor: seriesData.color, data: seriesData, credi
function chartConfig(seriesData) {
return {
barColor: seriesData.color,
data: seriesData,
credits: { enabled: false },
chart: {
width: seriesData.width,
defaultSeriesType: 'column',
backgroundColor: '#EAEFF6'
},
tooltip: { enabled: false },
colorAxis: {
dataClassColor: 'category'
},
colors: [],
legend: {},
title: {
useHTML: true,
text: (seriesData.name === 'n/a' || seriesData.name === 'N/A') ? '_' : seriesData.name,
style: {
color: (seriesData.name === 'n/a' || seriesData.name === 'N/A') ? '#E9EFF4' : '#666666',
fontSize: '14px',
fontFamily: 'Roboto',
fontWeight: 'bold',
paddingTop: '10px',
lineHeight: '1em'
},
align: 'center',
x: 0,
y: 2
},
plotOptions: {
column: {
stacking: 'normal',
animation: true,
borderColor: 'grey',
borderWidth: 0
},
series: {
borderRadius: 15,
dataLabels: {
enabled: false
},
states: {
hover: {
enabled: false
}
}
}
},
yAxis: [{
max: Math.max.apply(null, seriesData.scaleValues),
min: Math.min.apply(null, seriesData.scaleValues),
title: false,
minorGridLineColor: '#FFF',
gridLineColor: '#8E8E8E',
minPadding: 0,
tickPositions: (seriesData.scalePercentageValues || null),
labels: {
formatter: function () {
if (seriesData.usePercentage) {
return `${this.value} %`;
}
return this.value;
}
}
}],
xAxis: {
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
minorTickLength: 0,
tickLength: 0,
categories: seriesData.elements.map((x) => { return x.name; }),
labels: {
style: {
color: '#666666',
fontSize: '12px',
fontFamily: 'Roboto'
}
}
},
series: [{
dataLabels: {
style: {
fontSize: '12px',
fontWeight: 'normal',
textShadow: 'none',
color: 'black',
fontFamily: 'Roboto',
backgroundColor: 'blue'
},
enabled: true,
formatter: function () {
if (seriesData.usePercentage) {
return `${this.y}%`;
}
return this.y;
}
},
showInLegend: false,
name: 'Fill Series',
color: '#F2F6F9',
pointWidth: 28,
animation: true,
data: seriesData.elements.map((x) => {
return { name: x.name, y: x.value, color: x.color };
}),
borderRadiusTopLeft: 10,
borderRadiusTopRight: 10,
borderColor: '#C0C0C0',
borderWidth: '1'
}]
};
}
module.exports = chartConfig;
到目前为止,我尝试的唯一解决方案是使用pointPadding和groupPadding。但是,这似乎没有达到预期效果。您可以设置参数和自适应,也可以设置参数和自适应,以及