5

Highchartsを使用していて、日時軸のあるグラフがあります。ほとんどの場合、ラベルは軸に沿って重なり合うことなく正しく配置されます。

ただし、ラベルが重なる場合があります。ここに例を示します。http：//jsfiddle.net/4ghhf/tickInterval とtickPixelIntervalを使用しても問題は解決しません。

問題を回避するにはどうすればよいですか？

4

6 に答える 6

10

問題を解決する方法は 2 つあります。

  • ティック間隔を変更する
  • ラベルの表示を変更する

次のコード (xAxis セクション) で両方を適用しました。

$(function () {
 var chart = new Highcharts.Chart({

    chart: {
        renderTo: 'container',
        type: 'column'
    },

    xAxis: {
        type: 'datetime',
        tickInterval : 7*24 * 3600 * 1000,
        labels : { y : 20, rotation: -45, align: 'right' }
    },
    series: [{
        data: [
            [Date.UTC(2010, 3, 11), 29.9],
            [Date.UTC(2010, 4, 8), 71.5]
         ]
    }]
});
于 2012-04-23T14:30:22.403 に答える
3

多分 staggerLines はあなたのための解決策です:

xAxis: {
    type: 'datetime',
    labels: {
        staggerLines: 2
    }
},

この設定でjsfiddleを更新しました：http://jsfiddle.net/benebun/4ghhf/134/

API Refから:

staggerLines: Number (2.1以降)

横軸のみ。ラベルを広げてスペースを空けたり、ラベルをきつくしたりする行の数。.

（githubのこのコメントで見つかりました）

この設定でjsfiddleを更新しました：http://jsfiddle.net/benebun/4ghhf/134/

于 2012-11-30T17:15:48.260 に答える
3

もう 1 つの解決策は、ティック間のピクセル間隔を定義する tickPixelInterval を使用することです。数値が大きいほど、ティック数が少なくなります。

http://api.highcharts.com/highcharts#xAxis.tickPixelInterval

于 2013-02-14T21:22:56.523 に答える
1

ここで私の答えを見つけました: Highcharts オーバーラップ カテゴリ ラベル HighCharts に UTC 日付コードを解析させる代わりに、xAxis ラベルにカテゴリ配列を使用していました。

于 2014-10-10T16:30:15.343 に答える
0

また、使用しているフォントによっても異なります。私の場合、これは Arial で発生しますが、Helvetica または Times New Roman では問題なく動作します。

于 2014-12-09T10:53:20.427 に答える