vue-schart の詳細な紹介

はじめに

vue-schart は、vue.js を使用して sChart.js チャート ライブラリをカプセル化する小さなコンポーネントです。 vue.js 1.x および 2.x をサポート

• 倉庫アドレス:

sChart.js 小さくてシンプルなグラフ ライブラリとして、あまり多くのグラフの種類はなく、棒グラフ、折れ線グラフ、および円グラフ 基本的なグラフには、棒グラフとドーナツ グラフの 4 つがあります。小さいながらも完成度が高い。 sChart.js は基本的にこれら 4 つのチャートのニーズを満たすことができます。また、その小ささはコードのサイズに反映されており、サーバー上で Gzip で圧縮するとさらに小さくなるため、プロジェクト コードの重複を心配する必要はありません。

このライブラリはcanvasを使用して実装されており、IE9以降のブラウザと互換性があります。

• 倉庫アドレス:

• ドキュメント(中国語と英語):

• デモアドレス:

効果

使用ガイド

インストール:

npm install vue-schart -S

vue コンポーネントで使用されます:

<template><p id="app"><schart :canvasId="canvasId"            :type="type"            :width="width"            :height="height"            :data="data"            :options="options"></schart></p></template><script>import Schart from &#39;vue-schart&#39;;export default {data() {return {canvasId: &#39;myCanvas&#39;,type: &#39;bar&#39;,width: 500,height: 400,data: [{name: &#39;2014&#39;, value: 1342},{name: &#39;2015&#39;, value: 2123},{name: &#39;2016&#39;, value: 1654},{name: &#39;2017&#39;, value: 1795},],options: {title: &#39;Total sales of stores in recent years&#39;}}},components:{Schart}}</script>

Application

vue-manage-system は、サイズが小さく、読み込みが速い vue-schart コンポーネントをバックグラウンド フレームワークで使用します。

以上がvue-schart の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。