chart.jsのVue.jsラッパーを使用して美しいチャートを作成します-jsチュートリアル-php.cn

chart.jsのVue.jsラッパーを使用して美しいチャートを作成します

Lisa Kudrow

リリース： 2025-02-16 12:42:10

オリジナル

865 人が閲覧しました

vue.jsとchart.js

を使用して美しいチャートを作成します

チャートは、テキストで表現するのが困難であり、読みやすく理解しやすい方法で存在するデータを理解するのが難しい情報を提示するのに役立つ最新のWebサイトとアプリケーションの重要な部分です。この記事では、chart.jsとvue.jsを使用してさまざまなタイプのチャートを作成する方法を示します。 Chart.jsは、シンプルで柔軟なJavaScriptチャートライブラリであり、開発者と設計者がHTML5キャンバス要素を使用してさまざまなタイプのチャートを描画できるようにします。 Vue.jsは、グラフ表現の例を示すためにchart.jsで使用するプログレッシブJavaScriptフレームワークです。 Vue.jsプロジェクトを構築するために、Vue CLIを使用します。

Creating Beautiful Charts Using Vue.js Wrappers for Chart.js

キーポイント：

ドキュメントの詳細な例とコードスニペットは、開発者がVue.JSプロジェクトでチャートを効果的に実装およびカスタマイズするのに役立ちます。

グラフィックライブラリの選択：

さまざまなチャートライブラリのVueラッパーは、GitHubのAwesome-Vueリポジトリに収集されています。 chart.jsに焦点を当てているため、次のラッパーに焦点を当てます。

vue-charts

vue-chartjs

vue-chartkick

Vue CLIを使用したプロジェクトを構築します：

最初に、次のコマンドを使用してVue CLIをインストールします次に、次のコマンドを使用してプロジェクトを構築します。

ウィザードに従って、次の機能を選択します。BABEL、ルーター、ESLINTがエラー防止のみ、SAVEのまとめ。

次に、chart.jsとさまざまなラッパーをインストールします

npm install -g @vue/cli

ログイン後にコピー

アプリケーションを実行します：

vue create chart-js-demo

ログイン後にコピー

基本設定：

cd chart-js-demo
npm install chart.js chartkick hchs-vue-charts vue-chartjs vue-chartkick

ログイン後にコピー

次のファイルを作成します：

npm run serve

ログイン後にコピー

、、フォルダーを削除します。

ルートを追加：

touch src/views/{VueChartJS.vue,VueChartKick.vue,VueCharts.vue}
touch src/components/{LineChart.vue,BarChart.vue,BubbleChart.vue,Reactive.vue}

ログイン後にコピー

src/views/About.vuesrc/components/HelloWorld.vueファイルを変更し、ルートを追加します：src/assets

ナビゲーションの追加：

ファイルを変更し、ナビゲーションとスタイルを追加します：src/router.js

// ... (导入语句) ...

export default new Router({
  routes: [
    { path: '/', name: 'Home', component: Home },
    { path: '/chartjs', name: 'VueChartJS', component: VueChartJS },
    { path: '/chartkick', name: 'VueChartKick', component: VueChartKick },
    { path: '/charts', name: 'VueCharts', component: VueCharts }
  ]
})

ログイン後にコピー

ホームコンポーネント：

src/views/Home.vueファイルを変更します：