在Highcharts BarChart上設置xAxis標籤爲50％

是否可以將條形圖的標籤設置爲圖表寬度的50％？我試過，但它不工作：在Highcharts BarChart上設置xAxis標籤爲50％

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 
     } 
     },

所以目標是對條形圖的左側是整個圖表容器的寬度的50％的標籤。

來源

2013-07-10 Andreas Köberle

如果您可以在小提琴上製作圖表的示例，則可能更容易找到一種方法來執行所需的操作。 – jlbriggs

我用另一種方法編輯我的答案，以中心x標籤。 –

更新我的問題以使其更清楚。 –

你必須在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-10 08:46:47

爲什麼-1？至少有評論解釋這將是很好的... –

不幸的是寬度的百分比，不支持，僅以像素爲單位。

來源

2013-07-10 10:53:54

在Highcharts BarChart上設置xAxis標籤爲50％

回答

相關問題