4

デフォルトでは、Highcharts は、すべてを表示するために必要な数の行にわたって x 軸ラベルをずらします。

ここに画像の説明を入力

この特定のケースでは、クレイジーに見えます。ラベルを広げる行数を指定するために使用できるstaggerLines オプションがあります。これを 1 に設定すると、同様に望ましくない結果が得られます。

ここに画像の説明を入力

すべてのラベルは同じ行に詰め込まれているため、実際にはどれも読み取れません。ハイチャートを説得して、1 行にできるだけ多くのラベルを表示させる方法はありますか?

n 番目ごとのラベルのみを表示するために使用できるステップ オプションがあることは認識していますが、グラフ内のデータ ポイントの総数 (N) はユーザーの選択に基づいて大きく変化するため、これはあまり役に立ちません。したがって、N が非常に可変である場合、n を設定しても意味がありません。

4

4 に答える 4

7

tickIntervalを使用して、ティック間の距離を定義することもできます。

于 2013-08-12T11:08:59.917 に答える
4

tickIntervalプロパティと非常に基本的な代数を使用してこれを解決しました。グラフに表示されるラベルの数は、

seriesLength / tickInterval = labelCount

したがって、11 個のラベルしか収まらない場合は、labelCount11 に設定し、上記の式を再配置して を解きtickIntervalます。

var tickInterval = seriesLength / 11

tickIntervalプロパティは整数でなければならないので、軸のプロパティに割り当てる前に変換してくださいtickInterval:

$j('#container').highcharts({

    xAxis: {
        tickInterval: Math.ceil(tickInterval)
    }

    // other Highcharts properties omitted
}
于 2013-08-12T12:35:42.507 に答える
3

1）回転を使用できます：

xAxis: {
    labels: {
    rotation: -90,
    align: 'right'
  }
}

2) 回転が役に立たない場合 - ステップを計算できます (xaxis が分類されている場合)。このコードは、ロード時、シリーズの追加時、およびズーム時にステップを計算します。

chart: {
      zoomType: 'x',
      events: {
        addSeries: function() {
          var c = this;
          setTimeout(function(){c.xAxis[0].setExtremes(c.xAxis[0].dataMin, c.xAxis[0].dataMax)}, 10);
        },
        load: function() {
          var c = this;
          setTimeout(function(){c.xAxis[0].setExtremes(c.xAxis[0].dataMin, c.xAxis[0].dataMax)}, 10);
        }
      }
    },
    xAxis: {
          events: {
            setExtremes: function (event) {
              if (Math.abs(this.options.labels.rotation) == 90) {
                var labelWidth = parseInt(this.options.labels.style.lineHeight) + 2;
                var plotAreaWidth = parseInt(this.chart.plotBox.width);
                var labelsCount = Math.floor(plotAreaWidth / labelWidth);
                if (event.max !== null && event.max !== undefined) {
                  var pointsCount = Math.round(event.max - event.min);
                } else {
                  var pointsCount = Math.round(this.dataMax - this.dataMin);
                }
                var step = Math.ceil(pointsCount / (labelsCount * (this.tickInterval == null ? 1 : this.tickInterval)));
                this.update({'labels': {'step': step}}, true);
              }
            }
          }
        }
于 2013-11-02T16:14:29.160 に答える
1

分類された x 軸を使用していますか?

代わりに datetime x 軸を使用し、チャートに tickinterval を計算させると、問題は解決するはずです。

于 2013-08-12T15:27:52.130 に答える