如何在highcharts.js中创建一个浮动柱状图？

huangapple
go评论155阅读模式
英文:

How to create a floating bar chart in highcharts.js?

问题

I'm using highcharts.js 10.3.3，但似乎无法添加悬浮柱状图(series)。我看到它们有一个'columnrange'数据类型，这正是我想要的，但我需要它横向而不是纵向运行。我似乎找不到'barrange'的等效项。理想情况下，我只需为系列中的每个数据点指定最左边的点和最右边的点：

  1. series: [
  2.   {
  3.     name: "My series",
  4.     data: [[100, 150], [300, 450]]
  5.   }
  6. ]
英文:

I'm using highcharts.js 10.3.3 and I can't seem to add a floating bar for a series. I see they have a 'columnrange' datatype which is what I'm looking for but I need it to run horizontally instead of vertically. I can't seem to find the 'barrange' equivalent. Ideally, I'd just specify the left-most point and right-most point for each datapoint in my series:

  1. series: [
  2.   {
  3.     name: "My series",
  4.     data: [[100, 150], [300, 450]]
  5.   }
  6. ]

答案1

得分: 1

我已找到解决方法。您需要使用'low'字段来指定最左侧的点：

  1. let chart;
  2. document.addEventListener('DOMContentLoaded', () => {
  3.     chart = new Highcharts.Chart({
  4.         chart: {
  5.             renderTo: 'container',
  6.             defaultSeriesType: 'bar',
  7.         },
  8.         legend: {
  9.             enabled: false
  10.         },
  11.         series: [{
  12.             data: [{
  13.                 y: 10,
  14.                 low: 5
  15.             },{
  16.                 y: 2,
  17.                 low: 8
  18.             },{
  19.                 y: 4,
  20.                 low: 7.5
  21.             }]
  22.         }]
  23.     });
  24. });
  1. <div id="container" style="height: 400px"></div>
  2. <script src="https://code.highcharts.com/10.3.3/highcharts.js"></script>
英文:

I figured it out. You need to use the 'low' field to specify the left-most point:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. let chart;
  2. document.addEventListener(&#39;DOMContentLoaded&#39;, () =&gt; {
  3.     chart = new Highcharts.Chart({
  4.         chart: {
  5.             renderTo: &#39;container&#39;,
  6.             defaultSeriesType: &#39;bar&#39;,
  7.         },
  8.         legend: {
  9.             enabled: false
  10.         },
  11.         series: [{
  12.             data: [{
  13.                 y: 10,
  14.                 low: 5
  15.             },{
  16.                 y: 2,
  17.                 low: 8
  18.             },{
  19.                 y: 4,
  20.                 low: 7.5
  21.             }]
  22.         }]
  23.     });
  24. });

<!-- language: lang-html -->

  1. &lt;div id=&quot;container&quot; style=&quot;height: 400px&quot;&gt;&lt;/div&gt;
  2. &lt;script src=&quot;https://code.highcharts.com/10.3.3/highcharts.js&quot;&gt;&lt;/script&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月31日 22:37:45
  • 转载请务必保留本文链接：https://go.coder-hub.com/76374657.html
  • highcharts
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定