gRaphael で作成しようとしている非常に単純な折れ線グラフがあります。私の問題は、グラフの最初の値が常に y 軸上に配置されることです。最初のポイントにパディングまたはオフセットを追加して、y 軸上にならないようにする方法はありますか?
私が試した解決策の 1 つは、他の行の x 値よりも 1 つ小さく、1 つ大きい別の x 値のセットを追加することですが、これにより x 軸のラベル付けが台無しになります。
私の問題を説明するためにjsFiddleを作成しました。その中で、最初のグラフは私が現在持っているもので、2番目のグラフは上記の解決策の問題を示しています。
( @eterpsの提案は受け入れられ、既製のソリューションを使用すると便利な場合もありますが、他の人が同じ問題に取り組むために、gRaphaël を使用してソリューションを提供する必要があると考えました。)
...しかし、これは私のx軸のラベル付けを台無しにします
「台無しにする」とは、欠損値を意味する場合、ほとんどそこにあります。追加された 2 つの値を考慮して、値を 4 に更新するだけaxisxstepで問題ありません (以下のデモを参照)。
一方、過度のパディングについて言及している場合は、プレゼンテーション（ラベル付け）に日付フォーマッタを適用しながら、日付を含む x 軸の値をより意味のある表現に移行することをお勧めします。Reason from Ex Rationeは、この方法などを説明する包括的な論文でそれについて書いています (以下のリンクを参照)。
この手法を適用した後、フォーマットされた日付値にパディング ハックを使用し、より細かい粒度を実現して、これらの醜いガターを狭めることができます。これを開始する方法については、以下の 2 番目のデモをご覧ください。
免責事項:このアプローチでは、Steven Levithan の Date Formatを追加の依存関係として含める必要があります。コードをスリングする前にそれを考慮してください。
デモ:
参考文献: