0

Is there way to set the label of an Bar Chart to 50% of the charts width? I've tried this but it does not work:

 xAxis: {
        categories: [],
        labels: {
          formatter: function() {
            var text = this.value;
            return '<div class="js-ellipse" style="width:100%; overflow:hidden; text-overflow: ellipsis" title="' + text + '">' + text + '</div>';
          },
          style: {
            width: '50%'
          },
          useHTML: true
        }
      },

So goal is to have labels on the left side of the bar chart that are 50% of the width of the whole chart container.

4

2 回答 2

1

您可以在以下选项中选择plotOptions：

plotOptions: {
    bar: {
        dataLabels: {
            enabled: true,
            inside: true
         // ^^^^^^^^^^^^
        }
    }
},

里面的属性：

对于具有范围的点，如列，是否对齐框内的数据标签或实际值点。在大多数情况下默认为 false，在堆叠列中默认为 true。

还有一个来自官方文档的示例：http: //jsfiddle.net/XXB9k/

编辑： 还有另一个选项可以将 x 标签居中（我不知道您在谈论的女巫标签），但是离您的代码不远有一个解决方案：

xAxis: {
    ...
    labels: {
        enabled: true,
        x: this.width / 2,
    }
}

一个例子：http: //jsfiddle.net/QMPkh/

最后编辑： 事实上，您可以简单地在标签格式化程序中使用图表的宽度：

labels: {
    enabled: true,
    formatter: function() {
        return '<div style="width:' + (this.axis.width/2) +'px">'+this.value+'</div>';
    },
    useHTML: true
}

显示结果的示例：http: //jsfiddle.net/QMPkh/2/

于 2013-07-10T08:46:47.820 回答
0

不幸的是，不支持百分比宽度，仅以像素为单位。

于 2013-07-10T10:53:54.573 回答