Question

我试图在Highcharts中的y轴上添加更多间距。目前，它看起来如下：

我在y轴上添加了一个滚动条。但是，滚动条似乎不起作用。相反，y轴上的条被推到一起，看起来很杂乱。我怎样才能解决这个问题？我正在使用Highstocks API。我现在使用的图表选项是： -

$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）类型。我想我可能比线系列更能代表您的数据。

Highcharts：如何在Y轴上的每个条之间应用填充

1 个答案: