highcharts |条形图中的标签宽度控件

0qx6xfy6  于 2022-11-10  发布在  Highcharts
关注(0)|答案(1)|浏览(187)

我试图找到一种方法来控制宽度的x轴标签容器在条形图的样式模式。我想有预设值,并根据预设有标签采取20,30,40,50%的图形。有一个属性吗?
谢谢你,谢谢你

zzlelutf

zzlelutf1#

如果您想根据标签长度和相对于图表宽度来设置标签宽度,您可以使用chart.event.render来实现。它将允许您找到字符数并动态设置百分比宽度。

var allowChartUpdate = true;

Highcharts.chart('container', {

  chart: {
    type: 'bar',
    styledMode: true,
    events: {
      render: function() {
        if (allowChartUpdate) {
          this.xAxis[0].categories.forEach(category => {
            if (category.length > 10) {
              var dynamicMargin = this.chartWidth * 50 / 100;
              allowChartUpdate = false;

              this.update({
                chart: {
                  marginLeft: dynamicMargin
                }
              }, true, true, false);

              allowChartUpdate = true;
            }
          })
        }
      }
    }
  },
...

示范:

https://jsfiddle.net/BlackLabel/59xjq4du/

API参考:

https://api.highcharts.com/highcharts/chart.events.render

相关问题