高图表 :如何在Y轴上的每个条形之间应用填充

Question

我正在尝试在Highcharts中y轴上的条形之间添加更多间距。

我在 y 轴上添加了一个滚动条。但是，滚动条似乎不起作用。相反，y 轴上的条形被推在一起，看起来杂乱无章。 我该如何解决这个问题？我正在使用HighstocksAPI。我现在使用的图表选项是：-

$scope.mychart = new Highcharts.Chart({
chart: {
renderTo: 'RoadmapGanttChart'
},
title: {
text: 'RoadMaps'
},
xAxis: {
type: 'datetime'
},
yAxis: {
categories: categories,
tickInterval: 1,            
tickPixelInterval: 200,
labels: {
useHTML: true,
style: {
color: '#525151',
font: '12px Helvetica',
fontWeight: 'bold',
paddingTop: '200px',
paddingBottom: '200px'
},
/* formatter: function() {
if (tasks[this.value]) {
return tasks[this.value].name;
}
}*/
},
startOnTick: false,
endOnTick: false,
title: {
text: 'Projects'
},
// minPadding: 0.2,
// maxPadding: 0.2,
fontSize:'15px',
scrollbar: {
enabled: true
}

},
legend: {
enabled: false
},
tooltip: {
formatter: function() {
return '<b>'+ $scope.filteredTasks[this.y].name + '</b><br/>' +
Highcharts.dateFormat('%m-%d-%Y', this.point.options.from)  +
' - ' + Highcharts.dateFormat('%m-%d-%Y', this.point.options.to); 
}
},
plotOptions: {
line: {
lineWidth: 10,
marker: {
enabled: false
},
dataLabels: {
enabled: true,
align: 'left',
formatter: function() {
return this.point.options && this.point.options.label;
}
}
}
},
series: $scope.filteredTasks
});

我是前端开发的新手。

Answer 1

您应该在 y 轴上设置极值- 滚动条将根据它们进行调整：

yAxis: {
min: 0,
max: 10,
scrollbar: {
enabled: true
}
},

现场演示：http://jsfiddle.net/rm9mk52c/

您也可以尝试在倒图中使用列范围系列 (https://www.highcharts.com/demo/columnrange( 类型。我想我可能比线系列更好地表示您的数据。