0
我制作了一个下拉酒吧图，其中酒吧有不同的pointWidth.I我想为每个酒吧有不同的宽度，因为他们有不同的百分比范围。 但是在我画完之后，我发现它们有规律的间隔但分布不均匀。小节之间的空格不一样，我看不到所有的小节。为不同宽度的酒吧设置相等的距离Highchart
我也尝试过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: {
\t 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: {
\t 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: {
\t 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: {
\t 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: {
\t 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: [{
\t \t name: '90-80%',
y: 42,
color: "#F2B04E",
drilldown: '90-80%'
}]
}, {
name: 'Number of Schools',
colorByPoint: true,
// pointPadding: 0.3,
pointWidth:90.8,
tooltip: {
\t 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: [{
\t \t name: '80-70%',
y: 12,
color: "#F2B04E",
drilldown: '80-70%'
}]
}, {
name: 'Number of Schools',
colorByPoint: true,
// pointPadding: 0,
pointWidth:272,
tooltip: {
\t 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: [{
\t \t name: '70-40%',
y: 36,
color: "#80AB7F",
drilldown: '70-40%'
}]
}, {
name: 'Number of Schools',
colorByPoint: true,
// pointPadding: 0,
pointWidth:272,
tooltip: {
\t 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: [{
\t \t name: '40-10%',
y: 37,
color: "#284E62",
drilldown: '40-10%'
}]
}],
drilldown: {
\t //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>
除了张贴@Deep 3015的回答，您可以使用pointPlacement属性来增加列之间/下降空间。例如：jsfiddle.net/7vn1nqm0。 –