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

V1.0バージョンのライブラリ以來(lái)、スケールは大きく変化し、現(xiàn)在はより強(qiáng)力になりました。このチュートリアルでは、スケールを操作する方法を?qū)Wび、ライブラリが提供するさまざまなオプションを使用して外観を制御します。

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

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

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

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

gridと呼ばれるキーもあります。 fontキーに設(shè)定した場(chǎng)合。

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

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

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

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

要約します

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

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

職場(chǎng)で使用する他の學(xué)習(xí)リソースまたはリソースを探している場(chǎng)合は、Envato市場(chǎng)で提供するリソースをチェックしてください。

以上がchart.js：axes and scalesを開(kāi)始しますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。