javascript - 使不同宽度的条形距离相等 Highchart-6ren

javascript - 使不同宽度的条形距离相等 Highchart

转载作者：行者123 更新时间：2023-12-03 03:40:41

我制作了一个向下钻取条形图，其中条形具有不同的点宽度。我希望每个条形具有不同的宽度，因为它们具有不同的百分比范围。但画出来之后，我发现它们间隔规则，但分布不均匀。条之间的空白空间不均匀，我看不到所有条。

我也尝试过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>

最佳答案

图表中有一个专门的区域来呈现列。如果该列宽度增加，那么它将相互重叠。因此，安全方面使用 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>

关于javascript - 使不同宽度的条形距离相等 Highchart，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45642296/

文章推荐： javascript - createJS - 容器中多个对象的随机移动

文章推荐： dart - 根据 flutter 中的动态数据扩展卡的高度

文章推荐： eclipse - 从 ant + ivy 迁移到 gradle

php - 条形/竖线分隔字段
有人知道如何在数组字段中插入以竖线/竖线分隔的数组吗？逗号可以正常工作，但是当我将其更改为 bar 时，它会产生错误“格式错误的数组文字” 示例(有效): insert into table (ar
r - 条形 geom_bar 之间的不同空间
我尽力阅读与我的问题相关的问题。最相关的是:question .但是我无法弄清楚如何解决我的问题。我有一个像这样的数据集 structure(list(COMPANY = structure(1
python - Matplotlib - 基于数据的动态(条形)图表高度？
在使用 matplotlib 挣扎了比我想承认的时间更长的时间之后，我试图在我使用过的几乎任何其他绘图库中做一些轻而易举的事情，我决定向 Stackiverse 寻求一些见解。简而言之，我需要的是创建
java - Android 条形 Activity 指示器
如何实现带有条形样式的 Activity 指示器。根据以下文档http://developer.android.com/design/building-blocks/progress.html “Ac
PHP:帮助格式化 Google(条形)图表
我正在尝试使用数组中的数据制作水平条形图 $values = implode(',', array_values($type)); $labels = implode('|', array_keys(
html - 如何使用 CSS 创建这个带 Angular 条形
这个问题在这里已经有了答案: Two-tone background split by diagonal line using css (7 个答案) Create a slanted edge
python - Matplotlib Pyplot 条形图中的 float 条形
我正在处理一个范围非常大的图表，我发现条形图偏离了轴。我怎样才能阻止这个？这是我在教程中编写的一个示例，因为我的数据是通过读取大量文件获取的。这说明了我遇到的问题。我给出了标准差，意味着一个很大的范围
ios - 在 Swift 中更改 UIProgressView(条形)的高度
我在 Swift 2.2 中创建了一个 UIProgressView(条形)，现在想改变它的高度。其他一些帖子建议使用 CGAffineTransformScale 来更改高度。但是，出于某种原因，这
javascript - 如何使用 Google 图表工具为 Y 轴创建具有两种不同比例的(条形)图表？
我想在条形图上绘制两组具有不同比例的值。例如，对于一周中的每一天，我都有一个比例(比如那天同事迟到的比例)和一个值(他们平均迟到多长时间)。这两个值可以绘制在两个单独的图表上，但将它们放在同一个图表
javascript - 在 Google 图表(组合图表)中显示/隐藏线条/条形
我想制作一个具有隐藏/显示功能的组合(线/条)图。我遇到的问题是我不知道如何指定索引更改(对于 javascript 来说是新的)这是我的示例(取消选中前两个复选框之一并重新选中它以查看问题): ht
c++ - 键入 “$” 命令不会跳转到行尾 [光标设置为 “|”(条形/管道)而不是 block 形]
我安装了 YCM(你完成了我)，当我编码时，我发现命令 $ 不工作。它不会跳到行尾，而是跳到最后一行。例如，a.cpp 中的一行: #include| 现在光标在 include 之后，然后我键
javascript - 条形 Highcharts 中 stackLabels Formatter 中的 X 轴值
我想在条形图顶部显示自定义标签。下面是我的 stacklabel 代码，这里的问题是我想在 stacklabel 的格式化程序中使用堆栈的类别名称，我该如何访问它。 stackLabels: {

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 使不同宽度的条形距离相等 Highchart