8

毎月のデータ ポイントで折れ線グラフを描いています。ただし、目盛には年の文字列のみを表示したいと考えています。ここまでは、とても簡単です。ただし、私が見る限り、Highcharts は常に目盛りを基準にして xAxis ラベルを描画します...そして目盛り間の中央に表示する必要があります。私が行方不明になっているこれを行う簡単な方法はありますか?

4

5 に答える 5

3

私の理解によると、あなたが望む動作は次のとおりです。
http://jsfiddle.net/msjaiswal/U45Sr/2/

ソリューションを分解してみましょう:
1. 月次データ ポイント
1 か月に対応する 1 つのデータ ポイント:

var data = [
    [Date.UTC(2003,1),0.872],
    [Date.UTC(2003,2),0.8714],
    [Date.UTC(2003,3),0.8638],
    [Date.UTC(2003,4),0.8567],
    [Date.UTC(2003,5),0.8536],
    [Date.UTC(2003,6),0.8564],
    ..
]

2. 年次ティックのみを表示するようにスケールする
次のようなチャート オプションを使用します。

        xAxis: {
        minRange : 30 * 24 * 3600 * 1000, //
        minTickInterval: 12* 30 * 24 * 3600 * 1000 // An year
    },
于 2013-04-24T13:02:16.847 に答える
2

シンプルですぐに使えるソリューションはありません。イベントを使用し、それに応じてラベルを再配置する必要があります。これは、ティック数が変更された場合でも、ブラウザー ウィンドウのサイズを変更する (またはチャートを強制的に再描画する) 場合にも機能するサンプル ソリューションです: http://jsfiddle.net/McNetic/eyyom2qg/3/

loadと の両方のイベントに同じイベント ハンドラーをアタッチすることで機能しredrawます。

$('#container').highcharts({
  chart: {
    events: {
      load: fixLabels,
      redraw: fixLabels
    }
  },
[...]

ハンドラー自体は次のようになります。

  var fixLabels = function() {
  var labels = $('div.highcharts-xaxis-labels span', this.container).sort(function(a, b) {
    return +parseInt($(a).css('left')) - +parseInt($(b).css('left'));
  });
  labels.css('margin-left', 
    (parseInt($(labels.get(1)).css('left')) - parseInt($(labels.get(0)).css('left'))) / 2
  );
  $(labels.get(this.xAxis[0].tickPositions.length - 1)).remove();
};

基本的には、次のように機能します。

  1. 既存のすべてのラベルを取得します (再描画すると、新しく追加されたラベルが含まれます)。2. css プロパティ 'left' で並べ替え (再描画後はこの方法で並べ替えられません)
  2. 最初の 2 つのラベル間のオフセットを計算します (オフセットはすべてのラベルで同じです)。
  3. オフセットの半分をすべてのラベルの margin-left として設定し、効果的にオフセットの半分を右にシフトします。
  4. 右端のラベルを削除します (チャートの外側に移動し、部分的に表示される場合があります)。
于 2016-10-20T10:02:41.610 に答える
-1

目盛りの配置を使用しようとしましたか? http://api.highcharts.com/highcharts#xAxis.tickmarkPlacement

于 2013-04-08T14:02:49.573 に答える
-1

必要なことを行うのに役立ついくつかの xAxis オプションがあります。

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

ラベルが目盛りの左または右のどちらにあるかを指定する 'align' と、目盛りからのラベルの x オフセットを指定できる 'x' を見てください。

于 2013-04-08T12:34:37.410 に答える