我制作了一个向下钻取条形图，其中条形图具有不同的pointWidth。我希望每个条形图具有不同的宽度，因为它们具有不同的百分比范围。 但是在我画了它之后，我发现它们有规律的间隔但分布不均匀。条形之间的空白区域不一样，我看不到所有的条形图。
我也试过了pointPadding，但我仍觉得这些条之间的空间太宽。所以我决定在这段代码中使用pointwidth来自定义条宽。
我想知道如何使它们之间的间隔相等，这样我就可以看到所有的条形对齐完美。或者可以使用pointPadding但缩短条形之间的空白区域。
这是代码。
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Demo Demo Demo',
margin:50
},
xAxis: {
type: 'category',
title: {
enabled: true,
text: "Percentage Range"
}
},
yAix: {
title: {
enabled: true,
text: "Number of Schools"
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
grouping: false,//divide series into three individual series
dataLabels: {
enabled: true
}
}
},
series: [{
name: 'Number of Schools',
colorByPoint: true,
// pointPadding: 0.1,
pointWidth:27.24,
tooltip: {
headerFormat: '<span><strong>Percentage Arange: {point.key}</strong></span>',
pointFormat: '<br><span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}</b>'
},
data: [{
name: '100-97%',
y: 50,
color: "#E96A50",
drilldown: '100-97%',
}]
}, {
name: 'Number of Schools',
colorByPoint: true,
// pointPadding: 0.1,
pointWidth:18.16,
tooltip: {
headerFormat: '<span><strong>Percentage Arange: {point.key}</strong></span>',
pointFormat: '<br><span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}</b>'
},
data: [{
name: '97-95%',
y: 33,
color: "#E96A50",
drilldown: '97-95%'
}]
}, {
name: 'Number of Schools',
colorByPoint: true,
// pointPadding: 0.4,
pointWidth:18.16,
tooltip: {
headerFormat: '<span><strong>Percentage Arange: {point.key}</strong></span>',
pointFormat: '<br><span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}</b>'
},
data: [{
name: '95-93%',
y: 33,
color: "#E96A50",
drilldown: '95-93%'
}]
}, {
name: 'Number of Schools',
colorByPoint: true,
// pointPadding: 0.4,
pointWidth:27.24,
tooltip: {
headerFormat: '<span><strong>Percentage Arange: {point.key}</strong></span>',
pointFormat: '<br><span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}</b>'
},
data: [{
name: '93-90%',
y: 24,
color: "#E96A50",
drilldown: '93-90%'
}]
}, {
name: 'Number of Schools',
colorByPoint: true,
// pointPadding: 0.3,
pointWidth:90.8,
tooltip: {
headerFormat: '<span><strong>Percentage Arange: {point.key}</strong></span>',
pointFormat: '<br><span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}</b>'
},
data: [{
name: '90-80%',
y: 42,
color: "#F2B04E",
drilldown: '90-80%'
}]
}, {
name: 'Number of Schools',
colorByPoint: true,
// pointPadding: 0.3,
pointWidth:90.8,
tooltip: {
headerFormat: '<span><strong>Percentage Arange: {point.key}</strong></span>',
pointFormat: '<br><span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}</b>'
},
data: [{
name: '80-70%',
y: 12,
color: "#F2B04E",
drilldown: '80-70%'
}]
}, {
name: 'Number of Schools',
colorByPoint: true,
// pointPadding: 0,
pointWidth:272,
tooltip: {
headerFormat: '<span><strong>Percentage Arange: {point.key}</strong></span>',
pointFormat: '<br><span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}</b>'
},
data: [{
name: '70-40%',
y: 36,
color: "#80AB7F",
drilldown: '70-40%'
}]
}, {
name: 'Number of Schools',
colorByPoint: true,
// pointPadding: 0,
pointWidth:272,
tooltip: {
headerFormat: '<span><strong>Percentage Arange: {point.key}</strong></span>',
pointFormat: '<br><span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}</b>'
},
data: [{
name: '40-10%',
y: 37,
color: "#284E62",
drilldown: '40-10%'
}]
}],
drilldown: {
//drillUpButton Option
drillUpButton: {
relativeTo: 'spacingBox',
position: {
y: 10,
x: 0
},
theme: {
color: "#5ab7f5",
fill: 'white',
'stroke-width': 2,
stroke: '#5ab7f5',
r: 5,
states: {
hover: {
color: 'white',
fill: '#5ab7f5'
},
select: {
fill: '#5ab7f5'
}
}
}
},
series: [{id:"100-97%", data: [
["Global Education Academy Middle (Los Angeles Unified)",100],
["Public Policy Charter (Los Angeles Unified)",100],
["N.E.W. Academy of Science and Arts (Los Angeles Unified)",99.9],
["Puente Charter (Los Angeles Unified)",99.7],
["Alliance College-Ready Middle Academy 4 (Los Angeles Unified)",99.4]
]}, {id:"97-95%", data:[
["Aspire Juanita Tate Academy Charter (Los Angeles Unified)",96.9],
["Summit Preparatory Charter (Los Angeles Unified)",96.9],
["Animo College Preparatory Academy (Los Angeles Unified)",96.9],
["Alliance Ouchi-O'Donovan 6-12 Complex (Los Angeles Unified)",96.9],
["Animo Ellen Ochoa Charter Middle (Los Angeles Unified)",96.9]
]}, {id:"95-93%", data:[
["Celerity Octavia Charter (Los Angeles Unified)",94.9],
["KIPP Vida Preparatory Academy (Los Angeles Unified)",94.8],
["Aspire Pacific Academy (Los Angeles Unified)",94.8],
["Vista Charter Middle (Los Angeles Unified)",94.8],
["Aspire Junior Collegiate Academy (Los Angeles Unified)",94.7]
]},{id:"93-90%", data: [
["Aspire Firestone Academy Charter (Los Angeles Unified)",92.9],
["USC East College Prep (Los Angeles Unified)",92.8],
["Collegiate Charter High School of Los Angeles (Los Angeles Unified)",92.6],
["KIPP Sol Academy (Los Angeles Unified)",92.6],
["Alliance Leadership Middle Academy (Los Angeles Unified)",92.5]
]},
{id:"90-80%", data: [
["KIPP Iluminar Academy (Los Angeles Unified)",89.8],
["Rise Kohyang Middle (Los Angeles Unified)",89.8],
["Los Angeles Leadership Primary Academy (Los Angeles Unified)",89.6],
["KIPP Empower Academy (Los Angeles Unified)",89.6],
["Lou Dantzler Preparatory Charter Middle (Los Angeles Unified)",89.6],
]},
{id:"80-70%", data:[
["Fenton Academy for Social and Emotional Learning (Los Angeles Unified)",79.9],
["Magnolia Science Academy 7 (Los Angeles Unified)",79.6],
["New Millennium Secondary (Los Angeles Unified)",78.7],
["PUC Community Charter Middle and PUC Community Charter Early College High (Los Angeles Unified)",77.4],
["Animo Westside Charter Middle (Los Angeles Unified)",76.4],
]},
{id:"70-40%", data: [
["Emelita Academy Charter (Los Angeles Unified)",68.7],
["View Park Preparatory Accelerated High (Los Angeles Unified)",67.5],
["Metro Charter (Los Angeles Unified)",66.8],
["Calvert Charter for Enriched Studies (Los Angeles Unified)",66.2],
["Grover Cleveland Charter High (Los Angeles Unified)",66.1],
]},{id:"40-10%", data: [
["Robert A. Millikan Middle School, Performing Arts Magnet & Science Academy STEM (Los Angeles Unified)",39.3],
["Darby Avenue Charter (Los Angeles Unified)",38.6],
["Westside Innovative School House Charter Middle (Los Angeles Unified)",38.6],
["El Oro Way Charter For Enriched Studies (Los Angeles Unified)",36.3],
["Serrania Avenue Charter For Enriched Studies (Los Angeles Unified)",36.1],
]}]
}
});.highcharts-drillup-button text tspan{
fill: #5ab7f5;
}
.highcharts-drillup-button:hover text tspan{
fill: white;
}<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
答案 0 :(得分：1)
图表中有专门的区域，用于渲染列。如果列宽增加，则它将相互重叠。因此，安全方使用pointPadding以在区域中提供所需的宽度。所以再次来缩短栏之间的空白这也是不可能的，如上所述。
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Demo Demo Demo',
margin: 50
},
xAxis: {
type: 'category',
title: {
enabled: true,
text: "Percentage Range"
}
},
yAix: {
title: {
enabled: true,
text: "Number of Schools"
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
grouping: false, //divide series into three individual series ,
groupPadding: 0,
dataLabels: {
enabled: true
}
}
},
series: [{
name: 'Number of Schools',
colorByPoint: true,
// pointPadding: 0.1,
pointWidth: 27.24,
tooltip: {
headerFormat: '<span><strong>Percentage Arange: {point.key}</strong></span>',
pointFormat: '<br><span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}</b>'
},
data: [{
name: '100-97%',
y: 50,
color: "#E96A50",
drilldown: '100-97%',
}]
}, {
name: 'Number of Schools',
colorByPoint: true,
pointPadding: 0.1,
//pointWidth:18.16,
tooltip: {
headerFormat: '<span><strong>Percentage Arange: {point.key}</strong></span>',
pointFormat: '<br><span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}</b>'
},
data: [{
name: '97-95%',
y: 33,
color: "#E96A50",
drilldown: '97-95%'
}]
}, {
name: 'Number of Schools',
colorByPoint: true,
pointPadding: 0.4,
//pointWidth:18.16,
tooltip: {
headerFormat: '<span><strong>Percentage Arange: {point.key}</strong></span>',
pointFormat: '<br><span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}</b>'
},
data: [{
name: '95-93%',
y: 33,
color: "#E96A50",
drilldown: '95-93%'
}]
}, {
name: 'Number of Schools',
colorByPoint: true,
pointPadding: 0.4,
//pointWidth:27.24,
tooltip: {
headerFormat: '<span><strong>Percentage Arange: {point.key}</strong></span>',
pointFormat: '<br><span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}</b>'
},
data: [{
name: '93-90%',
y: 24,
color: "#E96A50",
drilldown: '93-90%'
}]
}, {
name: 'Number of Schools',
colorByPoint: true,
pointPadding: 0.3,
//pointWidth:90.8,
tooltip: {
headerFormat: '<span><strong>Percentage Arange: {point.key}</strong></span>',
pointFormat: '<br><span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}</b>'
},
data: [{
name: '90-80%',
y: 42,
color: "#F2B04E",
drilldown: '90-80%'
}]
}, {
name: 'Number of Schools',
colorByPoint: true,
pointPadding: 0.3,
//pointWidth:90.8,
tooltip: {
headerFormat: '<span><strong>Percentage Arange: {point.key}</strong></span>',
pointFormat: '<br><span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}</b>'
},
data: [{
name: '80-70%',
y: 12,
color: "#F2B04E",
drilldown: '80-70%'
}]
}, {
name: 'Number of Schools',
colorByPoint: true,
pointPadding: 0,
//pointWidth:272,
tooltip: {
headerFormat: '<span><strong>Percentage Arange: {point.key}</strong></span>',
pointFormat: '<br><span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}</b>'
},
data: [{
name: '70-40%',
y: 36,
color: "#80AB7F",
drilldown: '70-40%'
}]
}, {
name: 'Number of Schools',
colorByPoint: true,
pointPadding: 0,
//pointWidth:272,
tooltip: {
headerFormat: '<span><strong>Percentage Arange: {point.key}</strong></span>',
pointFormat: '<br><span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}</b>'
},
data: [{
name: '40-10%',
y: 37,
color: "#284E62",
drilldown: '40-10%'
}]
}],
drilldown: {
//drillUpButton Option
drillUpButton: {
relativeTo: 'spacingBox',
position: {
y: 10,
x: 0
},
theme: {
color: "#5ab7f5",
fill: 'white',
'stroke-width': 2,
stroke: '#5ab7f5',
r: 5,
states: {
hover: {
color: 'white',
fill: '#5ab7f5'
},
select: {
fill: '#5ab7f5'
}
}
}
},
series: [{
id: "100-97%",
data: [
["Global Education Academy Middle (Los Angeles Unified)", 100],
["Public Policy Charter (Los Angeles Unified)", 100],
["N.E.W. Academy of Science and Arts (Los Angeles Unified)", 99.9],
["Puente Charter (Los Angeles Unified)", 99.7],
["Alliance College-Ready Middle Academy 4 (Los Angeles Unified)", 99.4]
]
}, {
id: "97-95%",
data: [
["Aspire Juanita Tate Academy Charter (Los Angeles Unified)", 96.9],
["Summit Preparatory Charter (Los Angeles Unified)", 96.9],
["Animo College Preparatory Academy (Los Angeles Unified)", 96.9],
["Alliance Ouchi-O'Donovan 6-12 Complex (Los Angeles Unified)", 96.9],
["Animo Ellen Ochoa Charter Middle (Los Angeles Unified)", 96.9]
]
}, {
id: "95-93%",
data: [
["Celerity Octavia Charter (Los Angeles Unified)", 94.9],
["KIPP Vida Preparatory Academy (Los Angeles Unified)", 94.8],
["Aspire Pacific Academy (Los Angeles Unified)", 94.8],
["Vista Charter Middle (Los Angeles Unified)", 94.8],
["Aspire Junior Collegiate Academy (Los Angeles Unified)", 94.7]
]
}, {
id: "93-90%",
data: [
["Aspire Firestone Academy Charter (Los Angeles Unified)", 92.9],
["USC East College Prep (Los Angeles Unified)", 92.8],
["Collegiate Charter High School of Los Angeles (Los Angeles Unified)", 92.6],
["KIPP Sol Academy (Los Angeles Unified)", 92.6],
["Alliance Leadership Middle Academy (Los Angeles Unified)", 92.5]
]
},
{
id: "90-80%",
data: [
["KIPP Iluminar Academy (Los Angeles Unified)", 89.8],
["Rise Kohyang Middle (Los Angeles Unified)", 89.8],
["Los Angeles Leadership Primary Academy (Los Angeles Unified)", 89.6],
["KIPP Empower Academy (Los Angeles Unified)", 89.6],
["Lou Dantzler Preparatory Charter Middle (Los Angeles Unified)", 89.6],
]
},
{
id: "80-70%",
data: [
["Fenton Academy for Social and Emotional Learning (Los Angeles Unified)", 79.9],
["Magnolia Science Academy 7 (Los Angeles Unified)", 79.6],
["New Millennium Secondary (Los Angeles Unified)", 78.7],
["PUC Community Charter Middle and PUC Community Charter Early College High (Los Angeles Unified)", 77.4],
["Animo Westside Charter Middle (Los Angeles Unified)", 76.4],
]
},
{
id: "70-40%",
data: [
["Emelita Academy Charter (Los Angeles Unified)", 68.7],
["View Park Preparatory Accelerated High (Los Angeles Unified)", 67.5],
["Metro Charter (Los Angeles Unified)", 66.8],
["Calvert Charter for Enriched Studies (Los Angeles Unified)", 66.2],
["Grover Cleveland Charter High (Los Angeles Unified)", 66.1],
]
}, {
id: "40-10%",
data: [
["Robert A. Millikan Middle School, Performing Arts Magnet & Science Academy STEM (Los Angeles Unified)", 39.3],
["Darby Avenue Charter (Los Angeles Unified)", 38.6],
["Westside Innovative School House Charter Middle (Los Angeles Unified)", 38.6],
["El Oro Way Charter For Enriched Studies (Los Angeles Unified)", 36.3],
["Serrania Avenue Charter For Enriched Studies (Los Angeles Unified)", 36.1],
]
}
]
}
});.highcharts-drillup-button text tspan {
fill: #5ab7f5;
}
.highcharts-drillup-button:hover text tspan {
fill: white;
}<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>