c# - フロットダニラベルを回転させる

Question

グラフの下部にある日付を回転させて、垂直方向と水平方向に表示しようとしています。flot-tickrotorを使用していますが、正しく機能していないようです。

 xaxis: {
   rotateTicks: 110,
   mode: "time",
   timeformat: "%m/%d",
   minTickSize: [7, "day"],
   ticks: cpudatearray
 }

最終結果は正しくありません、それはすべてごちゃ混ぜに見えます。

Answer 1

プラグインを使用する代わりに、CSS でこれを処理するだけで運が良いかもしれません:

#flotPlaceholder div.xAxis div.tickLabel 
{    
    transform: rotate(-90deg);
    -ms-transform:rotate(-90deg); /* IE 9 */
    -moz-transform:rotate(-90deg); /* Firefox */
    -webkit-transform:rotate(-90deg); /* Safari and Chrome */
    -o-transform:rotate(-90deg); /* Opera */
    /*rotation-point:50% 50%;*/ /* CSS3 */
    /*rotation:270deg;*/ /* CSS3 */
}

明らかに、達成しようとしている角度に角度を変更してください。これを y 軸に使用する場合は、div.xAxisセレクターを変更するだけです。

自分のフロートグラフでテストした後の結果:

Answer 2

@Brendanの答えはかなりうまくいくように見えますが、それを実装する前に、これがユーザビリティの観点から本当にやりたいことかどうかを検討します。

表示しているテキストの最大長が 5 文字 (質問から、「MM DD」文字列) の場合、3 つおきの「目盛り」にラベルを付けるだけ (または意味のある数) にすると、チャートが読みやすくなる可能性があります。あなたのデータのために）。

ダッシュボード スタイルのアプリケーションでグラフを使用して同様の演習を行いました。ユーザーは、すべての結果に X ラベルが必要であると断言しましたが、チャートには 96 の目盛りがあったため、あなたが試みているように 90 度回転させると、かなりの量のテキストが作成されました。6 番目のポイントごとに水平の X ラベルが付いたモックアップを見せたところ、彼らはそのオプションを好み、それが提供されたソリューションで使用したものです。（あなたのマイレージは異なる場合があります..）