2

いくつかの幅制限を設定して、凡例テキストを折り返すようにしようとしています。何を試しても、「.c3-legend-item-event」の幅を狭めて2行以上にする方法がわかりません。そうしないと、テキストが長すぎてhtmlの外に出ます。

凡例は次のように設定されています: legend: {position: 'inset'} そして、グラフの右側に移動しましたが、2 行以上に折り返すことも、分割することもできません。

簡単に変更できる独自の Legend を追加するために jQuery を使用して例を読みましたが、それは避けたいと思います。また、データ フィードを制御することもできず、凡例のテキストを短くすることもできません。

ソースコードを表示するために使用しているグラフへの参照は次のとおりです: http://c3js.org/samples/chart_bar.html

凡例のオプションと設定への参照はこちら: http://c3js.org/reference.html

これが私のコードの一部です:

var bar = c3.generate({
        legend: {
            position: 'inset',
            inset: {
                x: 300,
                y: 40,
            }
        },
        data: {
          columns: list,
          type: 'bar',
          onclick: function (d, element) { console.log("onclick", d, element); },
          onmouseover: function (d) { console.log("onmouseover", d); },
          onmouseout: function (d) { console.log("onmouseout", d); },
          order: "asc"
        },
        bar: {
          width: {
            ratio: 0.7,
            //max: 50
          },
        },
});

どんな助けでも大歓迎です。

ありがとうございました。ここに画像の説明を入力

4

0 に答える 0