在高图横向条形图中显示所有标签 [英] Show all labels in highcharts horizontal bar graph

问题描述

我想在highchart
上显示所有标签，您可以看到 http：// jsfiddle。 net / valrecx / fj6d2 / 3021
表示月份不完整，代码仅显示jan，aprl，7月等
我想显示所有标签，包括那些月份

  var chart = new Highcharts.Chart中间
可见月份，1月，2月，3月，4月等。 （{
 
图：{
 renderTo：'container'，
 type：'bar'
}，
 
 xAxis：{
类别：['Jan'，'Feb'，'Mar'，'Apr'，'May'，'Jun'，'Jul'，'Aug'，'Sep'，'Oct'，'Nov'。 'Dec'，'Jan'，'Feb'，'Mar'，'Apr'，'May'，'Jun'，'Jul'，'Aug'，'Sep'，'Oct'，'Nov'，'Dec ']，
分钟：6 
}，
 plotOptions：{
 series：{
 pointPadding：0.4，groupPad ding：0.1，pointWidth：5 
} 
}，
图例：{
 verticalAlign：'top'，
y：100，
 align：'right '
}，
 
滚动条：{
已启用：true 
}，
 
系列：[{
 data：[ 29.9,71.5,106.4,129.2,144.0,176.0,135.6,148.5,216.4,194.1,95.6,54.4,9.9,71.5,106.4,129.2,144.0,176.0,135.6,148.5,216.4,194.1,95.6,54.4] b， $ b} 
] 
}）; 
  

我如何在highchart上实现这个功能？

#container div的高度至少改为 500px的。 Highcharts会显示其余的标签，因为它们会有足够的空间。

您可以缩小字体，但在这种情况下，您可能仍然需要增加高度保持可读性。这是如何：

  xAxis：{
 categories：['Jan'，'Feb'，'Mar'，' 4月，5月，6月，7月，8月，9月，10月，11月，12月，1月，2月，3月， ，5月，6月，7月，8月，9月，10月，11月，12月， b $ b style：{
 fontSize：'5px'
} 
} 
}，
  

以下是根据系列数据量调整图表高度的方法。它可能不是最好的解决方案，但它的工作原理。您必须根据您的需要调整值。

  if（chart.series [0] .data.length> 0）{
 var baseHeight = 150; 
 var extraHeightPerThing = 25; 
 
 chart.setSize（null，baseHeight + chart.series [0] .data.length * extraHeightPerThing）; 
} 
  

I want to show all labels on highchart you can see http://jsfiddle.net/valrecx/fj6d2/3021 that the months are not complete, the code only shows jan, aprl, july etc I want to show all the labels including those months that are in the middle of the visible months, jan, february, march, april etc.

var chart = new Highcharts.Chart({

    chart: {
        renderTo: 'container',
        type:'bar'
    },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec','Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        min: 6
    },
      plotOptions: {
            series: {
                pointPadding: 0.4,groupPadding:0.1   ,pointWidth:5
            }
        },
    legend: {
        verticalAlign: 'top',
        y: 100,
        align: 'right'
    },

    scrollbar: {
        enabled: true
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4,9.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }
       ]
});

How can I achieve that on highchart?

解决方案

The easiest way to do this is to change the height of the #container div to at least 500px. Highcharts will show the rest of the labels since there will be enough room.

You can make the font smaller, though in this case you will probably still need to increase the height to keep it readable. Here's how:

xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec','Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    min: 6,
    labels: {
        style: {
            fontSize: '5px'
        }
    }
},

Here is a way to adjust the height of a graph based on the amount of data in the series. It might not be the best solution but it works. You'll have to adjust the values to your needs.

if (chart.series[0].data.length > 0) {
    var baseHeight = 150;
    var extraHeightPerThing = 25;

    chart.setSize(null, baseHeight + chart.series[0].data.length * extraHeightPerThing);
}

这篇关于在高图横向条形图中显示所有标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！