Question

我正在尝试使用Highcharts创建堆积的条形图。

我也想在条形图中显示数据标签，但是我只想在条形图足够长以包含它们的情况下显示标签。如果文字比栏长，我想隐藏文字

这是我要构建的图表的示例：

Highcharts.chart('container', {
    chart: {
      type: 'bar'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    plotOptions: {
        series: {
            stacking: 'normal',
            dataLabels: {
                enabled: true,
                formatter: function(){
                    return 'text for value '+this.point.y;
                }
            }
        }
    },

    series: [{
        data: [1,2,3,4,5,6,7,8,9,10,11,12]
    },{
        data: [12,11,10,9,8,7,6,5,4,3,2,1]
    }]
});

这是jsfiddle链接：http://jsfiddle.net/xyszd7p4/

如果数据点太长，如何隐藏它们？在我的示例中，我想隐藏“值1的文本”数据标签，因为它不适合条形图。

Answer 1

此答案显示了一种隐藏太长标签的方法：https://stackoverflow.com/a/49750334。这不适用于条形图（或多个系列）。但是通过如下编辑它：

chart: {
  events: {
    load: function() {
      this.series.forEach(function(series) {
        var points = series.points
        points.forEach(function(point) {
          console.log(point);
          if (point.shapeArgs.height < point.dataLabel.width) { //using shapeArgs.height since this is a bar chart (would be width otherwise)
            point.dataLabel.hide();
          }
        });
      });

    }
  },
  type: 'bar'
},

您可以实现自己的追求。

工作中的JSFiddle示例： http://jsfiddle.net/ewolden/87c2t4uy/

如果没有足够的空间，请不要显示数据标签

1 个答案: