web-dev-qa-db-ja.com

凡例アイテムをハイチャートでラップする方法は？

ハイチャートを使用するのに大きな問題があります。なぜなら、凡例アイテムが非常に長い場合、何時間もラップしようとしてきたからです。

凡例と凡例アイテムの幅を設定しようとしましたが、テキストが凡例から出ています。私が見つけたのはhighcharts.src.jsを変更することだけですが、それはこの問題を解決する方法ではないと思います。

ここに私のコード：

<script type="text/javascript">
  var chart;
  $(document).ready(function() {
    chart = new Highcharts.Chart({
      chart: {
        renderTo: 'graph_container',
        defaultSeriesType: 'line',
        zoomType: 'y',
        marginRight: 130,
        marginBottom: $ {
          marginBottom
        }
      },
      title: {
        x: -10,
        text: null
      },
      xAxis: {
        title: {
          text: '<fmt:message key="html.time" bundle="${msg}"/>',
          align: 'high'
        },
        categories: [$ {
          years
        }]
      },
      yAxis: {
        title: {
          text: '<fmt:message key="html.value" bundle="${msg}"/>',
          align: 'high'
        },
        plotLines: [{
          value: 0,
          width: 1,
          color: '#808080'
        }]
      },
      tooltip: {
        style: {
          fontSize: '9pt',
          width: '400px', //,
          wrap: 'hard'
        },
        formatter: function() {
          return '<b>' + this.series.name + '<br>' +
            +this.x + ': ' + this.y + '</b>';
        }
      },
      legend: {
        layout: 'vertical',
        width: 600,
        floating: true,
        align: 'center',
        verticalAlign: 'bottom',
        borderWidth: 1,
        itemWidth: '500px'

      },
      credits: {
        enabled: false
      },
      exporting: {
        enabled: false
      },
      series: [ <
        c: forEach items = "${graphValues}"
        var = "value"
        varStatus = "counter" >
        <
        c: if test = "${counter.count != 1}" > , < /c:if> {
          name: '${value.name}',
          data: $ {
            value.jsonData
          }
        } <
        /c:forEach>
      ]
    });


  });
</script>
highchartstooltiplegend
14
Anuhastik

編集：実際にアイテムの幅を設定することはうまくいきました、おそらくより良い解決策です。

ItemWidthの設定が機能しませんただし、次のようなことができます。

labelFormatter: function() {
    var words = this.name.split(/[\s]+/);
    var numWordsPerLine = 4;
    var str = [];

    for (var Word in words) {
        if (Word > 0 && Word % numWordsPerLine == 0)
            str.Push('<br>');

        str.Push(words[Word]);
    }

    return str.join(' ');
}

例については、 http://jsfiddle.net/ArmRM/13520/ を参照してください。

7
johanj

次を使用できます。

legend: {
    itemStyle: {
        width: 90 // or whatever
    },
}

そしてHighchartsはあなたのためにアイテムを包みます。

41
William Joss Crowcroft

注意として、2017年にはtextOverflowオプションを使用できます

legend.itemStyle

各凡例アイテムのCSSスタイル。 CSSのサブセット、特にテキストに関連するオプションのみがサポートされています。 デフォルトのtextOverflowプロパティでは、長いテキストが切り捨てられます。代わりにテキストを折り返すには、nullに設定してください。

3
teran

長い凡例名を折り返す方法

legend: {
    enabled: true,
    width:555,
    itemWidth:500,
    itemStyle: {
        width:500
    }
}
3
Rakesh Kumar

すべてのアイテムを独自の行に配置する場合は、次を使用できます。

legend: {
    layout: "vertical"
}
1
AP.

凡例にitemStyleを設定すると、バグが発生します。スペースのない長いラベルはまだ折り返されません。

これは、特定の文字数にラップし（20をハードコーディングしました）、それより長い単語を強制的に中断するラベルレンダラー関数です。

function hcLabelRender(){
    var s = this.name;
    var r = "";
    var lastAppended = 0;
    var lastSpace = -1;
    for (var i = 0; i < s.length; i++) {
        if (s.charAt(i) == ' ') lastSpace = i;
        if (i - lastAppended > 20) {
            if (lastSpace == -1) lastSpace = i;
            r += s.substring(lastAppended, lastSpace);
            lastAppended = lastSpace;
            lastSpace = -1;
            r += "<br>";
        }
    }
    r += s.substring(lastAppended, s.length);
    return r;
}

次のように使用できます。

legend:{
    labelFormatter: hcLabelRender
}
1
Stephen Ostermiller

useHTMLオプションを使用している他の人にとっては、デフォルトの_textOverflow: "Ellipsis"_設定がラッピングを台無しにする問題が発生します。

上記のteranのように、itemStyle内に_textOverflow: null_を設定すると、useHTMLが有効になっていて、legendFormatter()内に記述したカスタムHTMLをラップしようとしているときに、ラップが即座に修正されます。

これがないと、デフォルトの切り捨てはHTMLに適用されず（文字列ではないなど）、_overflow: hidden_が設定されているように機能します。

0
Sam Griffiths

使用できます

labelFormatter: function() {
    return this.name; // insert your formatter function here
}

ラベルに、フォーマッタにhtmlタグを追加できます。この場合、<br>タグを追加して、手動で改行することができます。

参照してください： http://www.highcharts.com/ref/#legend--labelFormatter

0
user500074