3

xAxisに200を超えるカテゴリがあるズーム縦棒グラフがあります。そのため、初期状態（縮尺1：1）の場合、これらすべての人がX軸の下に表示され、垂直に配置しても何も読み取れません。ラベルを表示するには、グラフをズームする必要があります。

問題のスクリーンショットは次のとおりです。 ここに画像の説明を入力してください

これが私のコードです：http： //jsfiddle.net/sherlock85/hJcQm/

ズームレベルに応じて、ラベルの濃度を調整することはできますか（おそらくステップを自動的に変更します）？

よろしくお願いします。

ありがとう、Andrzej

4

4 に答える 4

3

易しいものから難しいものの順に...

カテゴリはほとんどが数値 (例: 'mir001') であるため、カテゴリを省略できます。これにより、すべてのカテゴリが表示されなくなります。その後、1、2、3 などと表示されます。

または、カテゴリを削除して、ラベル フォーマッタを使用することもできます。この場合、ラベルが数値で増加しているように見えるという事実を再び利用して、次のようなことを行うことができます。

chart = new Highcharts.Chart({
    xaxis: {
        labels: {
            formatter: function() {
                return "mir" + this.value;
            }
        }
    }
});

上記の両方により、ラベルの数が削減されます (ラベルは、ズームされるまで、1、50、100 などのパターンに従います)。

ラベルに非常にこだわりたい場合は、ラベル フォーマッタを使用し、計算を行ってグラフのスケールを見つけ、ラベルをどのように表示するかを決定する必要があります。たとえば、次のようなことができますが、かなり複雑です。

var categories = [] //have your categories as a separate list
var buckets = 4; 
var labelFormatter = function(frequency) {
    var count = 0;
    frequency = frequency || 0;
    return function () {
        count++;
        if ((count > frequency) || (frequency < 1)) {
                return this.value
        }
    }
};

chart = new Highcharts.Chart({
    zoomtype: 'x',
    events: {
        selection: function(event) {
            if (event.xAxis) {
                var scale = event.xAxis[0];
                var frequency = Math.floor((scale.max - scale.min) / buckets)
                this.xaxis[0].labels.formatter = labelFormatter(frequency);
            }
        }
    },
    xaxis: {
        labels: {
            formatter: labelFormatter(Math.floor(categories.length/buckets))
        }
    }
});

最後の解決策は正確には機能しないことを指摘しておく必要があります。これは、それがいかに難しいかをさらに示しています。

于 2011-04-29T13:25:09.627 に答える
0

おそらく元の質問には少し遅すぎますが、私はHighchartsで何かを開発していて、まさにこれを探していました。

将来の参考のために、これが私がそれをした方法です：

xAxis: {
    labels: {
        step: 5
    },
    events: {
        setExtremes: function(event) {
            if (event.max) {
                var frequency = Math.floor((event.max - event.min) / 17);
                this.options.labels.step = frequency;
            } else {
                this.options.labels.step = 5;
            }
        }
    }
},

if (event.max)基本的に、ズームしているか、リセットしているかをチェックします。17は、ズームアウトしたときに取得するラベルの数です。ラベルのステップは5に設定され、この特定のデータセットを使用します（これはすべてより洗練されている可能性がありますが、機能します）。

于 2013-03-05T19:47:03.040 に答える
0

私の解決策：

xAxis:
{
    categories: [ <!-- your categories -->],
    tickInterval: 5,        // Cada 5 valores muestra valor (five jump interval)
    labels:
    {
        rotation: -35,
        style:
        {
            font: 'normal 12px Verdana, sans-serif'
        }
    }
},
于 2011-12-07T08:15:57.710 に答える
0

これは私がこの問題をどのように解決したかです:

xAxis: {
   tickPositioner: function () {
      var positions = [],
          min = Math.floor(this.min),
          max = Math.ceil(this.max),
          tick = min,
          increment = Math.ceil((max - min) / 30);

      for (; tick < max; tick += increment) {
         positions.push(tick);
      }
      positions.push(max);
      return positions;
   }
}

tickPositioner は再描画時に呼び出されます。最小値と最大値には、左端と右端 (x 軸) の両端を含む値が含まれます。

于 2014-02-24T15:55:53.130 に答える