chart.jsを備えた派手なレスポンシブチャート

データは私たちの周りにあります。検索エンジンやその他のアプリケーションは、データのテキストベースの表現で最も最適に機能しますが、人々は視覚的に表現されたデータを理解しやすいと感じています。今年の初め、SitePointは、chart.jsの紹介を紹介するAurelioの記事を公開しました。このチュートリアルでは、その紹介の簡単な要約に続いて、chart.jsの機能をより深く調べることができます。

キーテイクアウト

Chart.jsは、HTML5キャンバスベースのレスポンシブで軽量のチャートチャートライブラリで、それぞれが多数のカスタマイズオプションを備えた6つの異なるチャートタイプをサポートしています。これはモジュール式であり、開発者は必要なチャートタイプのみを含めることができ、ファイルサイズを最小限に抑えます。
• ライブラリでは、ツールのヒント、アニメーション、さらにはカスタムチャートタイプの作成など、チャートの広範なカスタマイズが可能になります。これには、グローバルな設定とチャート固有のオプションの両方が含まれ、応答性のある構成オプションをtrueに設定することにより、チャートを応答する機能を備えています。
chart.jsは、データの動的な追加と削除もサポートしているため、株式市場の表現などのデータが長期にわたって変化する状況に最適です。これは、removedata（）やadddata（valuesArray、label）などの方法で、またはチャートに値を直接設定することで実現できます。
始めましょう
chart.jsは、HTML5キャンバスベースのレスポンシブで柔軟な、軽量のチャートライブラリです。ライブラリは6つの異なるチャートタイプをサポートしています。これらのチャートタイプはそれぞれ、多数のカスタマイズオプションが付属しています。それだけでは不十分な場合は、独自のカスタムチャートタイプを作成することもできます。

chart.jsの6つのコアチャートタイプはすべて、わずか11kbの模倣とgzip'dであり、ライブラリはモジュール式であるため、実際に必要なチャートタイプのみを含めることで、ファイルのリクエストサイズをさらに削減できます。以下は、それを含めるCDNJSリンクです：

利用可能な構成オプション

chart.jsを使用すると、ツールのヒントからアニメーションまで、チャートのほぼすべての側面を変更できます。このセクションでは、いくつかの設定を変更して、Chart.jsが作成できるものを実証します。以下は、開始するHTMLです：

<span><script></script></span>

最初のデモでは、ラインチャートを作成します。チャートを意味するために設定する必要がある基本的なオプションがいくつかあります。ラインチャートは、一連のラベルとデータセットを期待しています。ラベルはx軸に表示されます。ラインチャートをダミーデータで埋めました。データは、データセットの配列に分類されます。各データセットには、塗りつぶし、ライン、およびポイントの色があります。

この場合、充填色に透明になりました。 fillcolorの値を設定しないと、代わりに黒または灰色に設定されます。他の値にも同じことが言えます。色は、CSSと同様のRGBA、RGB、HEX、またはHSL形式を使用して定義されています。

<span><script src="https://img.php.cn/upload/article/000/000/000/174049952240765.jpg"></script></span>

グローバルオプションの設定

いくつかのグローバル値を設定するコードを含めました。 AnimationStepsはアニメーションの期間を決定します。 ScalelineColorやScaleIntegersonlyなど、ニーズに応じて変更できるオプションはさらに多くあります。 chart.jsドキュメントを使用して、このライブラリが提供する他のものを確認することをお勧めします。

<span><canvas id="canvas"></canvas></span>

チャート固有のオプションの設定

グローバルオプションに加えて、個々のチャートタイプで利用可能な構成オプションがあります。このラインチャートにこれらのオプションのいくつかを設定して、アイデアを提供します。

chart.jsによって生成されたチャートは、デフォルトでは応答性がありません。 （上記のように）trueに応答性のある設定により、それらは応答します。すべてのチャートを応答する必要がある場合は、このように代わりにこれをグローバルに設定することをお勧めします。

以下の以下には、ラインチャートのデモを見ることができます：

<span>var lineData = {
</span>  <span>labels: ['Data 1', 'Data 2', 'Data 3', 'Data 4', 
</span>           <span>'Data 5', 'Data 6', 'Data 7'],
</span>  <span>datasets: [{
</span>    <span>fillColor: 'rgba(0,0,0,0)',
</span>    <span>strokeColor: 'rgba(220,180,0,1)',
</span>    <span>pointColor: 'rgba(220,180,0,1)',
</span>    <span>data: [20, 30, 80, 20, 40, 10, 60]
</span>  <span>}, {
</span>    <span>fillColor: 'rgba(0,0,0,0)',
</span>    <span>strokeColor: 'rgba(151,187,205,1)',
</span>    <span>pointColor: 'rgba(151,187,205,1)',
</span>    <span>data: [60, 10, 40, 30, 80, 30, 20]
</span>  <span>}]
</span><span>}</span>

CodepenのSitePoint（@SitePoint）によるペンChart.jsラインチャートのデモを参照してください。

データの追加と削除

<span>Chart.defaults.global = {
</span>  <span>animationSteps : 50,
</span>  <span>tooltipYPadding : 16,
</span>  <span>tooltipCornerRadius : 0,
</span>  <span>tooltipTitleFontStyle : 'normal',
</span>  <span>tooltipFillColor : 'rgba(0,160,0,0.8)',
</span>  <span>animationEasing : 'easeOutBounce',
</span>  <span>scaleLineColor : 'black',
</span>  <span>scaleFontSize : 16
</span><span>}</span>

時間の経過とともに変化するデータを表示する必要がある場合があります。このシナリオの典型的な例は、株式市場です。このセクションでは、バーチャートを作成し、データを動的に削除し、データを追加します。私はいくつかのランダムデータを使用します、そして、この場合、バーチャートでデータを表すことにしました。この例のほとんどのコードは、前の例に似ています。 HTML（前の例と同じ）を取得したら、JavaScriptを追加できます。

最初に、ダミーデータをチャートに記入するためのコードを書きます。関数式を使用してランダム値を生成し、可変DDATAに保存します。これらの値は、必要性が生じるたびにランダムデータを提供するために使用されます。前の例のように、ラベルとデータセットの配列を作成し、任意の充填カラーを設定します。

次に、チャートにバーを削除して追加するコードを記述する時が来ました。 11の値でインデックス変数を初期化することから始めます。2つの方法を使用しています：removedata（）とadddata（valuesArray、label）。チャートインスタンスでremovedata（）を呼び出すと、その特定のチャートのすべてのデータセットの最初の値が削除されます。 BarChartDemoの場合、データセットの最初の値が削除されます。 adddata（）を呼び出して、ラベルと一緒に値の配列を渡すと、チャートの最後に新しいデータポイントが追加されます。下のコードスニペットは、3秒ごとにチャートを更新します。

チャート内の値を更新する代替方法は、値を直接設定することです。以下の例では、最初の行で最初のデータセットの2番目のバーの値を60に設定します。この時点で更新を呼び出すと、バーは現在の値から60にアニメーション化されます。

そして、これがバーチャートのデモです：

結論 このチュートリアルは、chart.jsのいくつかの重要な機能を取り上げました。最初の例は、いくつかのグローバル設定の使用を実証しました。ただし、chart.jsは、チャートタイプに固有のカスタマイズオプションも提供します。ライブラリを使用すると、既に利用可能なチャートが要件を満たしていない場合、独自のチャートタイプを作成できます。このライブラリでできることとできないことを十分に把握できるように、ドキュメントを調べることをお勧めします。

chart.js

を備えた派手なレスポンシブチャートに関するよくある質問（FAQ） chart.jsチャートを完全にレスポンシブにするには、応答性のある構成オプションの設定をtrueに設定します。これにより、ウィンドウサイズが変更されたときにチャートがサイズを変更できます。これは、チャート構成に次のコードを追加することで行うことができます。

var mychart = new Chart（ctx、{

タイプ： 'bar'、

data：data、

options： {
Responsive：true
}
}デザイン。
chart.jsチャートが正しくサイズ変更されていない場合、いくつかの理由が原因である可能性があります。一般的な問題の1つは、チャートを含むキャンバス要素が正しくサイズ変更されていないことです。キャンバス要素の相対位置と幅と高さが100％であることを確認してください。別の問題は、チャート構成のレスポンシブオプションがTrueに設定されていないことです。チャートの構成を確認して、応答性のあるオプションが正しく設定されていることを確認してください。

chart.jsチャートの外観をカスタマイズするにはどうすればよいですか？チャートの外観。色、ラベル、ツールチップなどをカスタマイズできます。たとえば、バーチャート内のバーの色をカスタマイズするには、次のコードを使用できます。

var mychart = new Chart（ctx、{

タイプ： 'bar'、

データ：{ datasets：[{ backgroundcolor： 'rgba（75、192、192、0.2）'

}]

}

}）;

このコードは、バーの背景色を明るい青色に設定します。同様のオプションを使用して、チャートの外観の他の多くの側面をカスタマイズできます。

chart.jsのツールチップはデフォルトで有効になり、チャート上のデータポイントの上にホバリングすると表示されます。ツールチップ構成オプションを使用して、ツールチップの外観と動作をカスタマイズできます。たとえば、ツールチップの背景色を変更するには、次のコードを使用できます。

var mychart = new Chart（ctx、{
type： 'bar'、
data：data、
options：{ツールチップ：{ backgroundcolor： 'rgba（0、0、0、0.8）'
}
}
}）;
このコードは、ツールチップの背景色を半透明の黒色に設定します。同様のオプションを使用して、ツールチップの他の多くの側面をカスタマイズできます。

チャートにアニメーションを追加するにはどうすればよいですか？ 。アニメーション構成オプションを使用して、アニメーションの期間、緩和機能、その他の側面を制御できます。たとえば、2000ミリ秒の期間と「EaseOutBounce」の緩和関数でチャートをアニメーション化するには、次のコードを使用できます。

var mychart = new Chart（ctx、{

type： ' bar '、

data：data、

options：{
animation：{
duration：2000、
easing： 'EaseOutBounce'
}
}
}）;
このコードは、2秒にわたってバウンス効果でチャートをアニメーション化します。同様のオプションを使用して、アニメーションの他の多くの側面をカスタマイズできます。

以上がchart.jsを備えた派手なレスポンシブチャートの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。