Question

我正在使用HighCharts - 条形图来解决这个问题。

当我的数据集没有足够的数据时（例如，在图表区域中只有两个条形设计用于显示20个条形图），条形图可以自我伸展。喜欢这个小提琴：http://jsfiddle.net/32toL65L/

所以，为了将栏杆推到顶部，我添加了

plotOptions-> car-> maxPointSidth:15; //Fix max bar width to 15 pixels
x-axis -> max : 20;  // Move bars to top two positions
series[0].data. push(['',0])  x 18 times // to display 18 empty blocks

它几乎奏效了......差不多！但是数字在xAxis标签中显示为3到20，我无法弄清楚如何删除.. 这是最后的小提琴：http://jsfiddle.net/aux4vgmq/

我做错了什么？当我的数据集填充x轴标签的空字符时，为什么会显示这些数字？

您能否提供有关如何删除这些额外数字或如何配置HighCharts以将条形对齐到顶部的任何建议？

提前致谢！

Answer 1

在xAxis定义中指定类别名称，而不是在数据中指定。

xAxis: {
    max: 10,
    type: 'category',        
    categories: ['Shanghai', 'Lagos','','','','','','','','','']
}

http://jsfiddle.net/e3hw4pv4/

Answer 2

您可以使用setCategories设置xAxis。从系列生成xAxis的集合类别的动态方法提供。

Highcharts.chart('container', {
    chart: {
        type: 'bar',
        events: {
                 load: function (e) {
                 var series_data=this.series[0].data
                 var categoriesArr=[];
                 for(var i=0;i<series_data.length;i++){
                            categoriesArr.push(series_data[i].name)
                 }
                  this.xAxis[0].setCategories(categoriesArr);
            }
        }
    },
    title: {
        text: 'World\'s largest cities per 2014'
    },
    subtitle: {
        text: 'Source: <a href="http://en.wikipedia.org/wiki/List_of_cities_proper_by_population">Wikipedia</a>'
    },
    xAxis: {
            max:10,
        type: 'category',
        labels: {
            rotation: 0,
            style: {
                fontSize: '13px',
                fontFamily: 'Verdana, sans-serif'
            }
        }
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Population (millions)'
        }
    },
    legend: {
        enabled: false
    },
    tooltip: {
        pointFormat: 'Population in 2008: <b>{point.y:.1f} millions</b>'
    },
    plotOptions:{
          bar :{
            maxPointWidth:15
          }
        },
    series: [{
        name: 'Population',
        data: [
            ['Shanghai', 23.7],
            ['Lagos', 16.1],
            ['',0],
            ['',0],
            ['',0],

            ['',0],
            ['',0],
            ['',0],
            ['',0],
            ['',0],
            ['',0],

        ]
    }]
});

Fiddle link

Answer 3

感谢解决方案Gayan Dasanayake＆amp;深3015.

通过使用xAxis Labels的不同长度的空白字符串，我找到了一种解决此问题的混乱方法。我通过反复试验偶然发现了这个问题，但我并不完全确定它的工作原理。

  data: [
        ['Shanghai', 23.7],
        ['Lagos', 16.1],
        ['',0],
        [' ',0],
        ['  ',0],

        ['   ',0],
        ['    ',0],
        ['     ',0],
        ['      ',0],
        ['       ',0],
        ['        ',0]

    ]

http://jsfiddle.net/4voq0hb9/2/

我更喜欢你的解决方案，因为动态设置xAxis类别肯定比使用空白空间生成字符串更简洁。

如何将HighCharts（条形图）条形对齐到顶部/前部？

3 个答案: