我有2个系列的高位图表。
column: {
pointPadding: 0, //also tried 0.1
pointWidth: 35,
groupPadding:0.1, // also tried 0
borderWidth: 0
},
如何更改列之间的间距,我想固定35px的宽度。
这是我的源代码。谢谢
var ConstantsConfigChart = {
colorText: "#444",
fontsize12: "12px",
fontsize14: "14px",
fontsize16: "16px"
}
var Constants = {
OKWON: 100000000
}
let topRightOption = {
chart: {
type: 'column',
spacingBottom: 0,
spacingTop: 10,
spacingLeft: 0,
spacingRight: 0,
animation: false
},
title: {
text: 'Unit',
align: 'left',
style: {
color: ConstantsConfigChart.colorText,
fontSize: ConstantsConfigChart.fontsize14
},
margin: 0,
x: 0,
y: 12,
},
xAxis: {
categories: [],
crosshair: true,
labels: {
style: {
color: ConstantsConfigChart.colorText,
fontSize: ConstantsConfigChart.fontsize14,
fontWeight: 'bold'
}
}
},
yAxis: [{
min: 0,
title: {
text: ' '
},
labels: {
style: {
color: ConstantsConfigChart.colorText,
fontSize: ConstantsConfigChart.fontsize12
},
formatter: function() {
return Highcharts.numberFormat(this.value / Constants.OKWON, 1);
}
}
},
{
title: {
text: ' ',
style: {}
},
labels: {
enabled: true,
formatter: function() {
return Highcharts.numberFormat(this.value, 1);
},
style: {
color: ConstantsConfigChart.colorText,
fontSize: ConstantsConfigChart.fontsize12
}
},
opposite: true,
offset: 10,
crosshair: true
}
],
tooltip: {
shared: true,
formatter: function() {
var tooltip = [],
title = "<span class=\"TooltipText12\">" + this.x + "</span><br/>";
tooltip.push(title + '<br>');
$.each(this.points, function(i, point) {
if (i < 2) {
tooltip.push("<span style=\"color:" + this.point.color + "\">●</span> " + this.series.name + ": " + Highcharts.numberFormat(this.point.y / Constants.OKWON, 1) + '<span style="padding:0"> 억원</span> <br/>');
} else {
tooltip.push("<span style=\"color:" + this.point.color + "\">●</span> " + this.series.name + ": " + this.point.y + '<span style="padding:0">%</span> <br/>');
}
});
return tooltip.join('');
},
style: {
fontWeight: 'normal',
fontSize: ConstantsConfigChart.fontsize14
}
},
plotOptions: {
column: {
pointPadding: 0,
pointWidth: 35,
groupPadding: 0.1,
borderWidth: 0
},
series: {
animation: false
}
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
colors: ['#fe7c7c', '#43d487', '#ff9600'],
series: [],
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
itemStyle: {
color: ConstantsConfigChart.colorText,
fontSize: ConstantsConfigChart.fontsize14,
fontWeight: 'normal'
}
}
};
data = {
"StatisticGoalFee": [{
"Name": "(BOARD)",
"Value": 900000000.0
},
{
"Name": "(COMPONENT)",
"Value": 700000000.0
},
{
"Name": "(MODULE)",
"Value": 770000000.0
}
],
"StatisticRealFee": [{
"Name": "(BOARD)",
"Value": 860000000.0
},
{
"Name": "(COMPONENT)",
"Value": 460000000.0
}, {
"Name": "(MODULE)",
"Value": 590000000.0
}
],
"ProgressKRW100Rate": [{
"Name": "(BOARD)",
"Value": 0.5
},
{
"Name": "(COMPONENT)",
"Value": 117.9
},
{
"Name": "(MODULE)",
"Value": 3.0
}
]
};
let seriesGoal = data.StatisticGoalFee.map(c => ({
name: c.Name,
y: c.Value
}));
let seriesReal = data.StatisticRealFee.map(c => ({
name: c.Name,
y: c.Value
}));
let rates = data.ProgressKRW100Rate.map(c => ({
name: c.Name,
y: c.Value
}));
topRightOption.xAxis.categories = seriesGoal.map(c => c.name);
//this.bottomRightOption.series[1].data = seriesReal;
var top_right = Highcharts.chart('container', topRightOption);
top_right.addSeries({
name: "도전",
data: seriesGoal,
dataLabels: {
enabled: true,
padding: 5,
style: {
color: ConstantsConfigChart.colorText,
textOutline: false,
fontSize: ConstantsConfigChart.fontsize14,
fontWeight: 'normal'
},
align: 'right',
stackLabels: {
enabled: true
},
formatter: function() {
return Highcharts.numberFormat(this.y / Constants.OKWON, 1);
}
}
});
top_right.addSeries({
name: "실적",
data: seriesReal,
dataLabels: {
enabled: true,
padding: 5,
style: {
color: ConstantsConfigChart.colorText,
fontSize: ConstantsConfigChart.fontsize14,
textOutline: false,
fontWeight: 'normal',
},
align: 'left',
stackLabels: {
enabled: true
},
formatter: function() {
return Highcharts.numberFormat(this.y / Constants.OKWON, 1);
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>
我刚刚尝试为系列添加配置
series: {
animation: false,
pointWidth: 35,
groupPadding: 0.4,
}
并删除groupPadding:0.1, //groupPadding:0.1,
现在好了,但是我想有更好的解决方案。
最后,当我调整屏幕列大小的大小时,我发现了maxpointWidth选项,具有maxpointWidth:35。
var ConstantsConfigChart = {
colorText: "#444",
fontsize12: "12px",
fontsize14: "14px",
fontsize16: "16px"
}
var Constants = {
OKWON: 100000000
}
let topRightOption = {
chart: {
type: 'column',
spacingBottom: 0,
spacingTop: 10,
spacingLeft: 0,
spacingRight: 0,
animation: false
},
title: {
text: 'Unit',
align: 'left',
style: {
color: ConstantsConfigChart.colorText,
fontSize: ConstantsConfigChart.fontsize14
},
margin: 0,
x: 0,
y: 12,
},
xAxis: {
width: '350px',
categories: [],
crosshair: true,
labels: {
style: {
color: ConstantsConfigChart.colorText,
fontSize: ConstantsConfigChart.fontsize14,
fontWeight: 'bold'
}
}
},
yAxis: [{
min: 0,
title: {
text: ' '
},
labels: {
style: {
color: ConstantsConfigChart.colorText,
fontSize: ConstantsConfigChart.fontsize12
},
formatter: function() {
return Highcharts.numberFormat(this.value / Constants.OKWON, 1);
}
}
},
{
title: {
text: ' ',
style: {}
},
labels: {
enabled: true,
formatter: function() {
return Highcharts.numberFormat(this.value, 1);
},
style: {
color: ConstantsConfigChart.colorText,
fontSize: ConstantsConfigChart.fontsize12
}
},
opposite: true,
offset: 10,
crosshair: true
}
],
tooltip: {
shared: true,
formatter: function() {
var tooltip = [],
title = "<span class=\"TooltipText12\">" + this.x + "</span><br/>";
tooltip.push(title + '<br>');
$.each(this.points, function(i, point) {
if (i < 2) {
tooltip.push("<span style=\"color:" + this.point.color + "\">●</span> " + this.series.name + ": " + Highcharts.numberFormat(this.point.y / Constants.OKWON, 1) + '<span style="padding:0"> 억원</span> <br/>');
} else {
tooltip.push("<span style=\"color:" + this.point.color + "\">●</span> " + this.series.name + ": " + this.point.y + '<span style="padding:0">%</span> <br/>');
}
});
return tooltip.join('');
},
style: {
fontWeight: 'normal',
fontSize: ConstantsConfigChart.fontsize14
}
},
plotOptions: {
column: {
pointPadding: 0.05,
pointWidth: 35,
//groupPadding: 0.1,
borderWidth: 0
},
series: {
animation: false,
pointWidth: 35,
groupPadding: 0.4,
}
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
colors: ['#fe7c7c', '#43d487', '#ff9600'],
series: [],
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
itemStyle: {
color: ConstantsConfigChart.colorText,
fontSize: ConstantsConfigChart.fontsize14,
fontWeight: 'normal'
}
}
};
data = {
"StatisticGoalFee": [{
"Name": "(BOARD)",
"Value": 900000000.0
},
{
"Name": "(COMPONENT)",
"Value": 700000000.0
},
{
"Name": "(MODULE)",
"Value": 770000000.0
}
],
"StatisticRealFee": [{
"Name": "(BOARD)",
"Value": 860000000.0
},
{
"Name": "(COMPONENT)",
"Value": 460000000.0
}, {
"Name": "(MODULE)",
"Value": 590000000.0
}
],
"ProgressKRW100Rate": [{
"Name": "(BOARD)",
"Value": 0.5
},
{
"Name": "(COMPONENT)",
"Value": 117.9
},
{
"Name": "(MODULE)",
"Value": 3.0
}
]
};
let seriesGoal = data.StatisticGoalFee.map(c => ({
name: c.Name,
y: c.Value
}));
let seriesReal = data.StatisticRealFee.map(c => ({
name: c.Name,
y: c.Value
}));
let rates = data.ProgressKRW100Rate.map(c => ({
name: c.Name,
y: c.Value
}));
topRightOption.xAxis.categories = seriesGoal.map(c => c.name);
//this.bottomRightOption.series[1].data = seriesReal;
var top_right = Highcharts.chart('container', topRightOption);
top_right.addSeries({
name: "도전",
data: seriesGoal,
dataLabels: {
enabled: true,
padding: 5,
style: {
color: ConstantsConfigChart.colorText,
textOutline: false,
fontSize: ConstantsConfigChart.fontsize14,
fontWeight: 'normal'
},
align: 'right',
stackLabels: {
enabled: true
},
formatter: function() {
return Highcharts.numberFormat(this.y / Constants.OKWON, 1);
}
}
});
top_right.addSeries({
name: "실적",
data: seriesReal,
dataLabels: {
enabled: true,
padding: 5,
style: {
color: ConstantsConfigChart.colorText,
fontSize: ConstantsConfigChart.fontsize14,
textOutline: false,
fontWeight: 'normal',
},
align: 'left',
stackLabels: {
enabled: true
},
formatter: function() {
return Highcharts.numberFormat(this.y / Constants.OKWON, 1);
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>
一种可能的解决方案是使用Axis resizer
,但这将改变整体宽度,而不仅是条之间的间距。
请记住,由于此解决方案使用固定的px
值,因此您将需要根据条数计算此值。
xAxis: {
width: '350px',
// ...
}
var ConstantsConfigChart = {
colorText: "#444",
fontsize12: "12px",
fontsize14: "14px",
fontsize16: "16px"
}
var Constants = {
OKWON: 100000000
}
let topRightOption = {
chart: {
type: 'column',
spacingBottom: 0,
spacingTop: 10,
spacingLeft: 0,
spacingRight: 0,
animation: false
},
title: {
text: 'Unit',
align: 'left',
style: {
color: ConstantsConfigChart.colorText,
fontSize: ConstantsConfigChart.fontsize14
},
margin: 0,
x: 0,
y: 12,
},
xAxis: {
width: '350px',
categories: [],
crosshair: true,
labels: {
style: {
color: ConstantsConfigChart.colorText,
fontSize: ConstantsConfigChart.fontsize14,
fontWeight: 'bold'
}
}
},
yAxis: [{
min: 0,
title: {
text: ' '
},
labels: {
style: {
color: ConstantsConfigChart.colorText,
fontSize: ConstantsConfigChart.fontsize12
},
formatter: function() {
return Highcharts.numberFormat(this.value / Constants.OKWON, 1);
}
}
},
{
title: {
text: ' ',
style: {}
},
labels: {
enabled: true,
formatter: function() {
return Highcharts.numberFormat(this.value, 1);
},
style: {
color: ConstantsConfigChart.colorText,
fontSize: ConstantsConfigChart.fontsize12
}
},
opposite: true,
offset: 10,
crosshair: true
}
],
tooltip: {
shared: true,
formatter: function() {
var tooltip = [],
title = "<span class=\"TooltipText12\">" + this.x + "</span><br/>";
tooltip.push(title + '<br>');
$.each(this.points, function(i, point) {
if (i < 2) {
tooltip.push("<span style=\"color:" + this.point.color + "\">●</span> " + this.series.name + ": " + Highcharts.numberFormat(this.point.y / Constants.OKWON, 1) + '<span style="padding:0"> 억원</span> <br/>');
} else {
tooltip.push("<span style=\"color:" + this.point.color + "\">●</span> " + this.series.name + ": " + this.point.y + '<span style="padding:0">%</span> <br/>');
}
});
return tooltip.join('');
},
style: {
fontWeight: 'normal',
fontSize: ConstantsConfigChart.fontsize14
}
},
plotOptions: {
column: {
pointPadding: 0,
pointWidth: 35,
groupPadding: 0.1,
borderWidth: 0
},
series: {
animation: false
}
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
colors: ['#fe7c7c', '#43d487', '#ff9600'],
series: [],
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
itemStyle: {
color: ConstantsConfigChart.colorText,
fontSize: ConstantsConfigChart.fontsize14,
fontWeight: 'normal'
}
}
};
data = {
"StatisticGoalFee": [{
"Name": "(BOARD)",
"Value": 900000000.0
},
{
"Name": "(COMPONENT)",
"Value": 700000000.0
},
{
"Name": "(MODULE)",
"Value": 770000000.0
}
],
"StatisticRealFee": [{
"Name": "(BOARD)",
"Value": 860000000.0
},
{
"Name": "(COMPONENT)",
"Value": 460000000.0
}, {
"Name": "(MODULE)",
"Value": 590000000.0
}
],
"ProgressKRW100Rate": [{
"Name": "(BOARD)",
"Value": 0.5
},
{
"Name": "(COMPONENT)",
"Value": 117.9
},
{
"Name": "(MODULE)",
"Value": 3.0
}
]
};
let seriesGoal = data.StatisticGoalFee.map(c => ({
name: c.Name,
y: c.Value
}));
let seriesReal = data.StatisticRealFee.map(c => ({
name: c.Name,
y: c.Value
}));
let rates = data.ProgressKRW100Rate.map(c => ({
name: c.Name,
y: c.Value
}));
topRightOption.xAxis.categories = seriesGoal.map(c => c.name);
//this.bottomRightOption.series[1].data = seriesReal;
var top_right = Highcharts.chart('container', topRightOption);
top_right.addSeries({
name: "도전",
data: seriesGoal,
dataLabels: {
enabled: true,
padding: 5,
style: {
color: ConstantsConfigChart.colorText,
textOutline: false,
fontSize: ConstantsConfigChart.fontsize14,
fontWeight: 'normal'
},
align: 'right',
stackLabels: {
enabled: true
},
formatter: function() {
return Highcharts.numberFormat(this.y / Constants.OKWON, 1);
}
}
});
top_right.addSeries({
name: "실적",
data: seriesReal,
dataLabels: {
enabled: true,
padding: 5,
style: {
color: ConstantsConfigChart.colorText,
fontSize: ConstantsConfigChart.fontsize14,
textOutline: false,
fontWeight: 'normal',
},
align: 'left',
stackLabels: {
enabled: true
},
formatter: function() {
return Highcharts.numberFormat(this.y / Constants.OKWON, 1);
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>
[它可能没有按您预期的那样工作,因为您正在设置pointWidth
,docs说]
一个像素值,为每列或每条指定固定宽度。 为null时,宽度是根据pointPadding和groupPadding计算的。
因此,如果您未设置宽度,则可能会在某处设置pointPadding
和/或groupPadding
var ConstantsConfigChart = {
colorText: "#444",
fontsize12: "12px",
fontsize14: "14px",
fontsize16: "16px"
}
var Constants = {
OKWON: 100000000
}
let topRightOption = {
chart: {
type: 'column',
spacingBottom: 0,
spacingTop: 10,
spacingLeft: 0,
spacingRight: 0,
animation: false
},
title: {
text: 'Unit',
align: 'left',
style: {
color: ConstantsConfigChart.colorText,
fontSize: ConstantsConfigChart.fontsize14
},
margin: 0,
x: 0,
y: 12,
},
xAxis: {
categories: [],
crosshair: true,
labels: {
style: {
color: ConstantsConfigChart.colorText,
fontSize: ConstantsConfigChart.fontsize14,
fontWeight: 'bold'
}
}
},
yAxis: [{
min: 0,
title: {
text: ' '
},
labels: {
style: {
color: ConstantsConfigChart.colorText,
fontSize: ConstantsConfigChart.fontsize12
},
formatter: function() {
return Highcharts.numberFormat(this.value / Constants.OKWON, 1);
}
}
},
{
title: {
text: ' ',
style: {}
},
labels: {
enabled: true,
formatter: function() {
return Highcharts.numberFormat(this.value, 1);
},
style: {
color: ConstantsConfigChart.colorText,
fontSize: ConstantsConfigChart.fontsize12
}
},
opposite: true,
offset: 10,
crosshair: true
}
],
tooltip: {
shared: true,
formatter: function() {
var tooltip = [],
title = "<span class=\"TooltipText12\">" + this.x + "</span><br/>";
tooltip.push(title + '<br>');
$.each(this.points, function(i, point) {
if (i < 2) {
tooltip.push("<span style=\"color:" + this.point.color + "\">●</span> " + this.series.name + ": " + Highcharts.numberFormat(this.point.y / Constants.OKWON, 1) + '<span style="padding:0"> 억원</span> <br/>');
} else {
tooltip.push("<span style=\"color:" + this.point.color + "\">●</span> " + this.series.name + ": " + this.point.y + '<span style="padding:0">%</span> <br/>');
}
});
return tooltip.join('');
},
style: {
fontWeight: 'normal',
fontSize: ConstantsConfigChart.fontsize14
}
},
plotOptions: {
column: {
pointPadding: 0.2,
groupPadding: 0.4,
borderWidth: 0
},
series: {
animation: false
}
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
colors: ['#fe7c7c', '#43d487', '#ff9600'],
series: [],
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
itemStyle: {
color: ConstantsConfigChart.colorText,
fontSize: ConstantsConfigChart.fontsize14,
fontWeight: 'normal'
}
}
};
data = {
"StatisticGoalFee": [{
"Name": "(BOARD)",
"Value": 900000000.0
},
{
"Name": "(COMPONENT)",
"Value": 700000000.0
},
{
"Name": "(MODULE)",
"Value": 770000000.0
}
],
"StatisticRealFee": [{
"Name": "(BOARD)",
"Value": 860000000.0
},
{
"Name": "(COMPONENT)",
"Value": 460000000.0
}, {
"Name": "(MODULE)",
"Value": 590000000.0
}
],
"ProgressKRW100Rate": [{
"Name": "(BOARD)",
"Value": 0.5
},
{
"Name": "(COMPONENT)",
"Value": 117.9
},
{
"Name": "(MODULE)",
"Value": 3.0
}
]
};
let seriesGoal = data.StatisticGoalFee.map(c => ({
name: c.Name,
y: c.Value
}));
let seriesReal = data.StatisticRealFee.map(c => ({
name: c.Name,
y: c.Value
}));
let rates = data.ProgressKRW100Rate.map(c => ({
name: c.Name,
y: c.Value
}));
topRightOption.xAxis.categories = seriesGoal.map(c => c.name);
//this.bottomRightOption.series[1].data = seriesReal;
var top_right = Highcharts.chart('container', topRightOption);
top_right.addSeries({
name: "도전",
data: seriesGoal,
dataLabels: {
enabled: true,
padding: 5,
style: {
color: ConstantsConfigChart.colorText,
textOutline: false,
fontSize: ConstantsConfigChart.fontsize14,
fontWeight: 'normal'
},
align: 'right',
stackLabels: {
enabled: true
},
formatter: function() {
return Highcharts.numberFormat(this.y / Constants.OKWON, 1);
}
}
});
top_right.addSeries({
name: "실적",
data: seriesReal,
dataLabels: {
enabled: true,
padding: 5,
style: {
color: ConstantsConfigChart.colorText,
fontSize: ConstantsConfigChart.fontsize14,
textOutline: false,
fontWeight: 'normal',
},
align: 'left',
stackLabels: {
enabled: true
},
formatter: function() {
return Highcharts.numberFormat(this.y / Constants.OKWON, 1);
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>