エディター評価: ユーザー評価:[合計: 0 平均: 0].ilfs_responsive_below_title_1 { 幅: 300px; } @media(最小幅: 500px) {.ilfs_responsive_below_title_1 { 幅: 300px; } } @media(最小幅: 800px) {.ilfs_responsive_below_title_1 { 幅: 336px; } }
Chartist は、無料で使用できるオープン ソースの SVG チャート生成ライブラリです。非常に高度で、多くのパラメーターを使用して多くのチャートを生成できます。これにより、任意のサイズのカラフルなチャートを生成して、Web サイトに配置できます。 CSS を使用したアニメーションもサポートしているため、このライブラリの助けを借りて、アニメーション化されたチャートやグラフを生成できます。
レポートに関連するデータを表示するダッシュボードや Web ページを作成するには、チャートが必要です。.多くの場合、それらは動的または静的である必要がありました。そのためのツールはありますが、チャーティストのようなものではありません。これはおそらくその種類の 1 つです。非常に詳細なドキュメントと非常に優れた例が付属しているため、グラフの生成方法をすぐに学ぶことができます。
Chartist がサポートしているグラフの種類のリスト:
棒グラフ (積み上げおよび水平を含む) 折れ線グラフ円グラフ 面グラフ ドーナツ グラフ ゲージ チャート 折れ線散布図 アニメーション SVG パス 双極折れ線グラフ 時系列
Chartist によって生成されたグラフの機能:
非常に応答性の高い構成。ラベルの配置 複数行のラベル モバイル用のオーバーラップ バー データの穴 CSS アニメーション SVG アニメーション 高度な SMIL アニメーション プラグインのサポート
Chartsit を使用して SVG チャートを生成する方法
このライブラリを使用するには複数の方法があります。あなたがどのようなフロントエンド開発者であるかに応じて、それを使用できます。これは Node モジュールと、CDN 経由で HTML に直接提供できる埋め込み可能なスクリプト ファイルとして提供されます。
簡単にするために、これを HTML ドキュメントで非常に簡単に使用できます。これらのファイルを Web サイトの
セクションにインポートするだけです。 https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.jsライブラリ連携後は
ここで、指定されたコンテナーで実際にグラフを生成するスクリプト タグを追加します。これは実際には非常に簡単です。 JavaScript をよく知っている場合は、ドキュメントに目を通し、カスタム スクリプトの生成方法を確認できます。チャート。デモ目的では、次のコードを使用できます。作成済みの
これでほぼ完了です。ブラウザで HTML ファイルを開くだけです。チャートが生成されます。 JS コードをいじって、さまざまなデータに基づいてカスタム チャートを生成できます。また、この方法で別の種類のグラフを生成することもできます。
Chartist のメイン Web サイトのドキュメントは非常に詳細です。アニメーション チャートの作成方法についても多くの例があります。フロントエンド開発者は、そのドキュメントを参照してグラフを生成する必要があります。
まとめ:
Chartist は、開発者やデザイナーがカスタム チャートを統合するための宝石のようなツールだと言わざるを得ません。ステージングと本番環境のウェブサイト。非常に単純で、非常に複雑なものを作成しない限り、非常に長いコードを記述する必要はありません。 GitHub リポジトリにはすでに 10,000 個を超えるスターがあり、それ自体が大きな成果です。
