Highchartsのdatetime X軸上のティック/グリッド線を任意にデータ点と整列させる方法を教えてください。

Question

私はlazy_high_charts ruby​​ gemを使ってハイチャートチャートを作成しています。 x軸は連続した日付を表し、ラベルは3番目ごとに1つずつ表示されます。しかし、私はラベルの下に表示される日付とそれに伴って、グリッド線が現れる場所を制御することはできないようです。チャートが開始または終了する日付にかかわらず、特定の日付にティックを割り当てることは「ロック」されているように見え、変更する方法を見つけることができません。

私はstartOnTickとendOnTickをtrueに設定しているので、これは別の厄介な副作用があります：データ系列の行がグラフの左側に並んで表示されることがあります（この場合グリッド/ティック/ラベル）、時には最も左の値の右側に始まります。

私は考えることができるすべてを試してみましたが、見栄えの良い一貫性のあるソリューションが見つかりませんでした。私が望むのは、グラフの左右にグリッド/ティック/ラベルを付けることです。最初のラベルは、その日の何日かにかかわらず、最初のデータポイントと並んでいます。

（編集者：私は新しいユーザーであるため残念なことに下のスクリーンショットを投稿できません...アップロードすれば10ポイントを得ることができます） ここに2つの日付範囲を示すスクリーンショットがあります

いずれの場合も、ラベル/ティック/グリッド線は、時間範囲が異なっていても全く同じ日付になります。 （編集：上記参照）

以下は、私が使用しているグラフオプションです。彼らはルビー構文であるが、彼らはjavascriptに直接翻訳されることを謝ります。この問題以外のチャートは、私が望むのとまったく同じように表示されるため、外観の一部を損なうような変更を加えることは望ましくありません。ありがとう！

f.options[:title] = nil 

    f.options[:legend] = { :enabled => false } 

    f.options[:chart] = { 
    :defaultSeriesType => "line", 
    :height => 342, 
    :width => 760, 
    :opacity => 0.0, 
    :style => "{ width: 760px; height: 342px; }", 
    :borderColor => '#000000', 
    :plotBorderColor => '#000000', 
    :labels => "{ color: '#000000'; }", 
    :spacingLeft => 25, 
    :spacingRight => 25, 
    } 

    f.options[:xAxis] = { 
    :type => 'linear', 
    :gridLineWidth => 1, 
    :gridLineDashStyle => 'ShortDash', 
    :startOnTick => true, 
    :endOnTick => true, 
    :showLastLabel => true, 
    :tickInterval => 3.days * 1000, 
    :tickLength => 10, 
    :tickWidth => 1, 
    :tickPosition => 'inside', 
    :tickmarkPlacement => 'on', 
    :minorGridLineWidth => 0, 
    :minorGridLineDashStyle => 'Dot', 
    :minorTickInterval => 1.day * 1000, 
    :minorTickLength => 5, 
    :minorTickWidth => 1, 
    :offset => 15, 
    :minorTickPosition => 'inside', 
    :lineWidth => 0, 
    :labels => { :align => 'center', :step => 1 }, 
    :min => "2012-01-09".to_datetime.to_i * 1000, 
    :max => "2012-01-09".to_datetime.to_i * 1000 + 29.days * 1000, 
    } 

    f.options[:yAxis] = { 
    :title => { :text => nil }, 
    :type => 'linear', 
    :gridLineWidth => 0, 
    :min => 0, 
    :max => 100, 
    :labels => { :enabled => false } 
    } 
    f.series(:name=>'SeriesA', :data=>[29.9, 71.5, 54.4, 98, 2, 14.0, 23.6, 65.5, 34.4, 88.1], :color => "#D846AD", :pointStart => "2012-01-09".to_datetime.to_i * 1000, :pointInterval => 3.days * 1000) 
    f.series(:name=>'SeriesB', :data=> [40.9, 71.5, 32.4, 12.2, 12.0, 32.0, 43.6, 34.5, 56.4, 87.1], :color => "#0A96C9", :pointStart => "2012-01-09".to_datetime.to_i * 1000, :pointInterval => 3.days * 1000) 

Answer 1

あなたの問題は、日時ラベルの自動調整だと思います。 ハイチャートはポイントの日付をとり、独自のロジックに従って軸ラベルを設定します。

たとえば、軸が数年にわたる場合、2012年8月または年だけが表示されることがあります。 実際に軸に01.Aug 2012年の日付を割り当てると表示されるものHighchartsは軸のスケールに適した日付表示を表示しています。

あなたはx軸用DateTimeLabelFormatを設定することによって、この動作を制御することができます

dateTimeLabelFormats：日時軸のオブジェクトを、規模が適切な単位に調整し、自動的に ます。このメンバーは、各ユニットに使用されるデフォルトの文字列表現 を与えます。 の置換コードの概要は、dateFormatを参照してください。デフォルトは：ディスプレイにそれを得るために

{ 
    second: '%H:%M:%S', 
    minute: '%H:%M', 
    hour: '%H:%M', 
    day: '%e. %b', 
    week: '%e. %b', 
    month: '%e. %b', 
    year: '%e. %b %Y' 
} 

のようなものに

{ 
    second: '%H:%M:%S', 
    minute: '%H:%M', 
    hour: '%H:%M', 
    day: '%e. %b', 
    week: '%e. %b', 
    month: '%b \'%y', 
    year: '%Y' 
} 

：

だから、あなたがしなければならないすべてはこれを変更しているHighCharts Reference

を見ます

％e：月の日、1〜31. と ％b：「Jan」のような短い月。

したがって、たとえば、1月のスケールでは1月、1年以上のスケールでは1月23日です。

もう1つの方法は、グラフに強制的に値を表示することです。私は、日時折れ線グラフにお勧めだと思いますが、ここでは一例ではありません。 JSFiddle

そしてここStackOverflow questionもう少し詳細に

Answer 2

をこれがあなたの正確な問題であるかどうか言うことは困難です「スクリーンショットを見ることなく持っ再が、あなたの問題は、私はそれが何を考えているならば、ここでの解決策は次のとおりです。

はstartOnTick: trueとendOnTick: trueとともに、関連する軸の0にminPaddingとmaxPaddingを設定してみてください。おそらく、埋め込みを設定しないと、startOnTickとendOnTickの動作は無効になります。