0

棒グラフのラベルをグラフ幅の 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% のラベルを配置することです。

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 に答える