データは私たちの周りにあります。検索エンジンやその他のアプリケーションは、データのテキストベースの表現で最も最適に機能しますが、人々は視覚的に表現されたデータを理解しやすいと感じています。今年の初め、SitePointは、chart.jsの紹介を紹介するAurelioの記事を公開しました。このチュートリアルでは、その紹介の簡単な要約に続いて、chart.jsの機能をより深く調べることができます。
キーテイクアウト利用可能な構成オプション
chart.jsを使用すると、ツールのヒントからアニメーションまで、チャートのほぼすべての側面を変更できます。このセクションでは、いくつかの設定を変更して、Chart.jsが作成できるものを実証します。以下は、開始するHTMLです：
<span><script></script></span>
この場合、充填色に透明になりました。 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>
以下の以下には、ラインチャートのデモを見ることができます：
<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>データの追加と削除
<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>最初に、ダミーデータをチャートに記入するためのコードを書きます。関数式を使用してランダム値を生成し、可変DDATAに保存します。これらの値は、必要性が生じるたびにランダムデータを提供するために使用されます。前の例のように、ラベルとデータセットの配列を作成し、任意の充填カラーを設定します。
次に、チャートにバーを削除して追加するコードを記述する時が来ました。 11の値でインデックス変数を初期化することから始めます。2つの方法を使用しています：removedata（）とadddata（valuesArray、label）。チャートインスタンスでremovedata（）を呼び出すと、その特定のチャートのすべてのデータセットの最初の値が削除されます。 BarChartDemoの場合、データセットの最初の値が削除されます。 adddata（）を呼び出して、ラベルと一緒に値の配列を渡すと、チャートの最後に新しいデータポイントが追加されます。下のコードスニペットは、3秒ごとにチャートを更新します。
そして、これがバーチャートのデモです：
options： {
Responsive：true
}
}デザイン。
chart.jsチャートが正しくサイズ変更されていない場合、いくつかの理由が原因である可能性があります。一般的な問題の1つは、チャートを含むキャンバス要素が正しくサイズ変更されていないことです。キャンバス要素の相対位置と幅と高さが100％であることを確認してください。別の問題は、チャート構成のレスポンシブオプションがTrueに設定されていないことです。チャートの構成を確認して、応答性のあるオプションが正しく設定されていることを確認してください。
chart.jsチャートの外観をカスタマイズするにはどうすればよいですか？チャートの外観。色、ラベル、ツールチップなどをカスタマイズできます。たとえば、バーチャート内のバーの色をカスタマイズするには、次のコードを使用できます。
var mychart = new Chart（ctx、{
}
}）;
var mychart = new Chart（ctx、{
type： 'bar'、
data：data、
options：{
}
}
}）;
このコードは、ツールチップの背景色を半透明の黒色に設定します。同様のオプションを使用して、ツールチップの他の多くの側面をカスタマイズできます。
チャートにアニメーションを追加するにはどうすればよいですか？ 。アニメーション構成オプションを使用して、アニメーションの期間、緩和機能、その他の側面を制御できます。たとえば、2000ミリ秒の期間と「EaseOutBounce」の緩和関数でチャートをアニメーション化するには、次のコードを使用できます。
options：{
animation：{
duration：2000、
easing： 'EaseOutBounce'
}
}
}）;
このコードは、2秒にわたってバウンス効果でチャートをアニメーション化します。同様のオプションを使用して、アニメーションの他の多くの側面をカスタマイズできます。
以上がchart.jsを備えた派手なレスポンシブチャートの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
