chart.js：axes and scalesを開始します

最初の4つのチュートリアルでは、chart.jsについて多くのことを学びました。最初の4つのチュートリアルを読んだ後、ツールチップとタグをカスタマイズし、フォントを変更し、さまざまな種類のチャートを作成できるはずです。この一連のチュートリアルでは、chart.js：軸とスケールの側面はまだ導入されていません。

V1.0バージョンのライブラリ以来、スケールは大きく変化し、現在はより強力になりました。このチュートリアルでは、スケールを操作する方法を学び、ライブラリが提供するさまざまなオプションを使用して外観を制御します。

グリッドラインと軸ラベルを変更します

グリッドラインのすべての構成オプションは、タイトルキーとフォントキーのscaleオプションの下にネストされています。

以下は、異なるチャートオプションのセットで指定された同じ古い車の速度のチャートです。

 var chartoptions = {
  プラグイン：{
    伝説： {
      ディスプレイ：本当、
      ポジション：「トップ」、
      ラベル：{
        BoxWidth：50、
        usepointStyle：true、
        ポイントスタイル：「ライン」
      }
    }
  }、
  スケール：{
    x：{
      グリッド：{
        表示：false
      }、
      タイトル： {
        ディスプレイ：本当、
        テキスト：「秒単位の時間」、
        色：「赤」、
        フォント：{
          サイズ：24、
          重量：「太字」
        }
      }
    }、
    y：{
      グリッド：{
        色：「#CCC」、
        BorderDash：[20、4]、
        bordercolor：「黒」、
        ティックコラー：「黒」
      }、
      タイトル： {
        ディスプレイ：本当、
        テキスト：「時速マイルの速度」、
        色：「緑」、
        フォント：{
          サイズ：18、
          重量：「太字」
        }
      }
    }
  }
}; 

gridと呼ばれるキーもあります。 fontキーに設定した場合。

また、ユニットセットをminuteの最小値と最大値に使用して、ダニの最小値と最大値を設定することもできます。 displayFormatsキーを使用して、スケールで時間が表示される形式を指定できます。

roundキーを使用して、チャートにプロットする前に時間を丸くすることもできます。 roundの値を設定するときは注意してください。その価値をhourに設定し、チャートで2回プロットする必要があるとします。 1つが午前5時30分で、もう1つの時間が午前5時50分の場合、午前5時にティックマークに描かれます。その値をminuteに設定すると、それぞれ5:30と5:50のマーカーに描画されます。

次のコードを使用して、タイムスケールを使用してチュートリアルの先頭に描かれたラインチャートを描画できます。

 var chartoptions = {
  プラグイン：{
    伝説： {
      ポジション：「トップ」、
      ラベル：{
        BoxWidth：50、
        usepointStyle：true、
        ポイントスタイル：「ライン」、
      }
    }
  }、
  スケール：{
    x：{
      タイプ：「時間」、
      グリッド：{
        ティックコラー：「緑」、
        BorderDash：[5、2]、
        tickwidth：2、
        色：「黒」、
        bordercolor：「黒」、
      }、
      時間： {
        ユニット：「分」、
        ステップサイズ：30、
        tooltipformat： "HH：mm a"、
        displayformats：{
          「分」：「HH：MMA」
        }
      }、
      ティック：{
        色：「緑」、
        フォント：{
          重量：「太字」
        }
      }、
      タイトル： {
        ディスプレイ：本当、
        テキスト：「時間」、
        フォント：{
          体重：「太字」、
          サイズ：22
        }
      }
    }、
    y：{
      グリッド：{
        色：「黒」、
        BorderDash：[5、2、]、
        bordercolor：「黒」、
        ティックコラー：「赤」、
        tickwidth：2、
      }、
      ティック：{
        色：「赤」、
        フォント：{
          重量：「太字」
        }
      }、
      タイトル： {
        ディスプレイ：本当、
        テキスト：「スピード（MPHで）」、
        フォント：{
          体重：「太字」、
          サイズ：22
        }
      }
    }
  }
}; 

要約します

このチュートリアルは、chart.jsのさまざまなタイプのダニを理解するのに役立ちます。これで、スケールの色、最小値と最大値、スケールの数、およびその他の要因を制御することにより、チャートのスケールを簡単にカスタマイズできます。

このシリーズの5つのチュートリアルすべてを読んだ後、chart.jsで利用可能なすべてのタイプのチャートを作成できるはずです。このチュートリアルとこのシリーズを楽しんだことを願っています。

職場で使用する他の学習リソースまたはリソースを探している場合は、Envato市場で提供するリソースをチェックしてください。

以上がchart.js：axes and scalesを開始しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。