對於不同寬度的圖表，使等距

Question

我制作了一個向下鑽取的條形圖，其中的條形具有不同的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}">\●</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}">\●</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}">\●</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}">\●</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}">\●</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}">\●</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}">\●</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}">\●</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], ["NEW 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> 

Answer 1

圖表中有一個專門的區域用於渲染列，如果該列的寬度增加了，則會相互重疊，因此安全的一面使用pointPadding在in區域中提供所需的寬度。 因此，如上所述，再次要縮短條之間的空白也是不可能的。

 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}">\●</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}">\●</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}">\●</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}">\●</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}">\●</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}">\●</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}">\●</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}">\●</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], ["NEW 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>