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

javascript - 执行存在于输入值字段中的 javascript - JavaScript
我有一个 html 格式的表单: 我需要得到 JavaScript在value input 字段执行，但只能通过表单的 submit .原因是页面是一个模板所以我不控制它(不能有
javascript - JavaScript 代码片段正在破坏其他 JavaScript
我管理的论坛是托管软件，因此我无法访问源代码，我只能向页面添加 JavaScript 来实现我需要完成的任务。我正在尝试用超链接替换所有页面上某些文本关键字的第一个实例。我还根据国家/地区代码对这些
javascript - JavaScript 如何使新页面包含更多 JavaScript？
我正在使用 JS 打开新页面并将 HTML 代码写入其中，但是当我尝试使用 document.write() 在新页面中编写 JS 时功能不起作用。显然，一旦看到，主 JS 就会关闭。用于即将打开的
javascript - Javascript 引擎如何在浏览器中执行 Javascript？
提问不是为了解决问题，提问是为了更好地理解系统专家!我知道每当你将 javascript 代码输入 javascript 引擎时，它会立即由 javascript 引擎执行。由于没有看过Engi
javascript - 如何将 JavaScript 变量从一个 JavaScript 文件传递到另一个 JavaScript 文件？
我在一个文件夹中有两个 javascript 文件。我想将一个变量的 javascript 文件传递到另一个。我应该使用什么程序？最佳答案 window.postMessage用于跨文档消息。使
javascript - javascript 中的 javascript 输入问题
我有一个练习，我需要输入两个输入并检查它们是否都等于一个。如果是 console.log 正则 console.log false 我试过这样的事情: function isPositive(fir
javascript - 在加载其他 javascript 库的页面上嵌入 Javascript？
我正在做一个Web应用程序，计划允许其他网站(客户端)在其页面上嵌入以下javascript: 我的网络应用程序位于 http://example.org 。我不能假设客户端网站的页面有 JQue
javascript - 从 Javascript 内部调用 Javascript
目前我正在使用三个外部 JS 文件。我喜欢将所有三个 JS 文件合而为一。尽一切可能。我创建 aio.js 并在 aio.js 中 src="https://code.jquery.com/
javascript - AngularJS/javascript javascript 对象的特殊排序顺序
我有例如像这样的数组: var myArray = []; var item1 = { start: '08:00', end: '09:30' } var item2 = {
javascript - 在 Javascript 内部执行 Javascript？
所以我正在制作一个 Chrome 扩展，它使用我制作的一些 TamperMonkey 脚本。我想要一个“主”javascript 文件，您可以在其中包含并执行其他脚本。我很擅长使用以下行将其他 jav
javascript - 如何将变量从 javascript 移动到 javascript？
我有 A、B html 和 A、B javascript 文件。并且，如何将 A JavaScript 中使用的全局变量直接移动到 B JavaScript 中？示例 JavaScript) va
javascript - 从 javascript 调用 javascript
我需要将以下整个代码放入名为 activate.js 的 JavaScript 中。你能告诉我怎么做吗？ var int = new int({ seconds: 30, mark
javascript - 将变量值从一个 JavaScript 传递到另一个 JavaScript
我已经为我的 .net Web 应用程序创建了母版页 EXAMPLE1.Master。他们的 I 将值存储在 JavaScript 变量中。我想在另一个 JS 文件中检索该变量。示例1.大师:-
javascript - 有没有开源库可以在浏览器中使用 Javascript 来整理 Javascript？
是否有任何库可以用来转换这样的代码: function () { var a = 1; } 像这样的代码: function () { var a = 1; } 在我的浏览器中。因为我在 Gi
javascript - javascript 中的参数列表后缺少语法 javascript 错误 )
我收到语法缺失 ) 错误 $(document).ready(function changeText() { var p = document.getElementById('bidp
javascript - 第一个 JavaScript 完成后启动第二个 JavaScript
我正在制作进度条。它有一个标签。我想调整某个脚本完成的标签。在找到可能的解决方案的一些答案后，我想出了以下脚本。第一个启动并按预期工作。然而，第二个却没有。它出什么问题了？代码如下: HTML:
javascript - 为什么外部 javascript 库会阻止我页面上的 javascript？
这里有一个很简单的问题，我简单的头脑无法回答:为什么我在外部库中加载时，下面的匿名和onload函数没有运行？我错过了一些非常非常基本的东西。 Library.js 只有一行:console.log(
javascript - 如何区分代码内 javascript 和客户端 javascript
我知道 javascript 是一种客户端语言，但如果实际代码中嵌入的 javascript 代码以某种方式与在控制台上运行的代码不同，我会尝试找到答案。让我用一个例子来解释它: 我想创建一个像 Mi
javascript - 将 Javascript 内联到不显眼的 JavaScript？
我如何将这个内联 javascript 更改为 Unobtrusive JavaScript？谢谢! 感谢您的回答，但它不起作用。我的代码是: PHP js文件 document.getElem
javascript - 如何将 JavaScript 对象导出为 JavaScript？
我正在寻找将简单的 JavaScript 对象“转储”到动态生成的 JavaScript 源代码中的最优雅的方法。目的:假设我们有 node.js 服务器生成 HTML。我们在服务器端有一个对象x。

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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