英文:
How to create a floating bar chart in highcharts.js?
问题
I'm using highcharts.js 10.3.3，但似乎无法添加悬浮柱状图(series)。我看到它们有一个'columnrange'数据类型，这正是我想要的，但我需要它横向而不是纵向运行。我似乎找不到'barrange'的等效项。理想情况下，我只需为系列中的每个数据点指定最左边的点和最右边的点：
series: [
{
name: "My series",
data: [[100, 150], [300, 450]]
}
]
英文:
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:
series: [
{
name: "My series",
data: [[100, 150], [300, 450]]
}
]
答案1
得分: 1
我已找到解决方法。您需要使用'low'字段来指定最左侧的点：
let chart;
document.addEventListener('DOMContentLoaded', () => {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'bar',
},
legend: {
enabled: false
},
series: [{
data: [{
y: 10,
low: 5
},{
y: 2,
low: 8
},{
y: 4,
low: 7.5
}]
}]
});
});
<div id="container" style="height: 400px"></div>
<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 -->
let chart;
document.addEventListener('DOMContentLoaded', () => {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'bar',
},
legend: {
enabled: false
},
series: [{
data: [{
y: 10,
low: 5
},{
y: 2,
low: 8
},{
y: 4,
low: 7.5
}]
}]
});
});
<!-- language: lang-html -->
<div id="container" style="height: 400px"></div>
<script src="https://code.highcharts.com/10.3.3/highcharts.js"></script>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论