2

ページ幅が縮小および拡大できるレスポンシブサイトで作業している場合、凡例のアイテムが切り捨てられる可能性はありますか？

シリーズのタイトルはかなり長くなる可能性があるため、理想的には、凡例項目をグラフの約95％に設定し、長すぎる場合は省略記号を追加します。

凡例にHTMLを使用し、CSSで省略記号を適用しようとしましたが、これは機能しません。どんな助けでも素晴らしいでしょう、ありがとう。

4

4 に答える 4

9

Highcharts の最新 (4.1.1) バージョンは、切り捨てのインライン スタイルをサポートしています。だからあなたはこれを行うことができます：

legend:{
    itemStyle: {
            width:'50px',
            textOverflow: 'ellipsis',
            overflow: 'hidden'
        }  
}

http://jsfiddle.net/awq913h1/

関連する github の問題: https://github.com/highcharts/highcharts/issues/3331
関連する JsFiddle: http://jsfiddle.net/highcharts/d4johssh/

于 2015-02-19T19:25:29.723 に答える
7

labelFormatter 関数を使用するだけで、凡例のラベルで何でも行うことができます。

// ... initialization of chart
legend: {
    labelFormatter: function() {
        // do truncation here and return string
        // this.name holds the whole label
        // for example:
        return this.name.slice(0, 15)+'...'
    }
}

これが実際の例ですhttp://jsbin.com/oyicuc/12/edit

編集（以下のコメントに基づく）。

ラベルのテキストの動作をより適切に制御したい場合は、useHTML プロパティを true に設定して (チャートの凡例構成で)、css を使用してより適切にターゲットを設定できます。http://jsbin.com/oyicuc/20/editの例を次に示します。

レスポンシブにするために、チャートの再描画イベントをリッスンし、それに応じてラベルの css を変更できます。

于 2013-03-12T10:51:08.743 に答える
0

これは@WTKの回答に似ていますが、希望の長さよりも長いラベルのみを切​​り捨てます。 

formatter: function () {
    //Truncate very long labels
    var max = 20;
    var val = this.value;
    return (val.length > max ? val.slice(0, max) + '...' : val);
}
于 2014-04-10T14:49:58.187 に答える
0

私はWTKのソリューションを採用し（ちなみにありがとう）、それにいくつかの簡単なことを追加しました-それは誰かを助けるかもしれないと思いました. （編集：おっと-クリスの投稿を逃しました-彼にも似ていますが、幅の考慮事項があります）

  1. グラフの左側の余白の幅を指定します - これは、ラベルがどれだけのスペースを持つかを決定します - これは、ページに対して水平方向にスケーリングするグラフがある場合に重要です - 特定の文字数制限で切り詰めると、領域がラベルが十分に大きくありません。

  2. マージンに合わせてティックの長さを指定しました。

  3. 文字列の長さを確認しました-必要なものよりも大きい場合(つまり、ラップ/問題を引き起こす場合)、切り捨てます-そうでない場合は、省略記号(...)を追加しても意味がありません。これは本質的に次のことを意味します。

    • 長さが 24 文字 (私の場合) かどうかを確認し、3 文字短く切り捨てられている場合 (21)、省略記号を一時値に追加します。24 文字のラベルと切り捨てられたラベルを作成しても、長さは似ています。長さが 24 を超えない場合 - 切り捨ては必要なく、temp var は文字列の全長に設定されます。

    • 切り捨てられたバージョンのラベルを吐き出すだけでなく、ラベルをタイトル付きのスパンでラップします。ユーザーがラベルの上にマウスを置いて、値の完全な名前を取得できるようにします。

  4. スパン/タイトルに HTML 出力を使用します。

これが誰かを助けることを願っています:)

chart: {
    // usual setup stuff here
    marginLeft: 160 // #1
}

// ...

xAxis: {
    // ...
    tickLength: 160, // #2
    labels: {
        // ...
        formatter: function() {
            var temp = this.value.length > 24 ? this.value.slice(0, 21)+'...' : this.value; // #3
            return '<span title="Investment breakdown for '+ this.value +'">' + temp + '</span>'; // #3
        },
        useHTML: true // #4
}
于 2014-09-19T03:23:52.773 に答える