Bootstrapは、元TwitterデザイナーのMark OttoとJacob Thorntonが開発したフロントエンドのツールキットで、エレガントなHTMLおよびCSS仕様を提供します。 Bootstrapは単なるフレームワークではなく、ゲーム全体を変更します。このフレームワークにより、多くのアプリケーションとWebサイトの設計と開発がはるかに簡単になり、多数のHTMLフレームワークを製品に普及させます。
チャートコンポーネントChart.jsは、ブートストラップの最も便利なコンポーネントの1つです。有料コンポーネントHighChartに似ています。効果の点では、無料の製品と有料製品の間にはまだわずかな違いがありますが、機能性の点でプロジェクトのニーズをほとんど満たすことができます。次のJSスクリプトは、主にチャートの構成を容易にするために書かれています。
/***新しいチャート構成項目を取得* @paramカラーRGBAカラー* @paramタイプチャートタイプ：ライン、バー、レーダー、ポラレア、パイ、ドーナツ* @paramタイトルチャートのタイトルを表示*チャートのラベルを表示します*チャートのラベルを表示します。 y-axis* @returnsチャートの構成パラメーターを返します*/function getNewConfig（color、type、title、label、categories、data）{var background = color; var config = {type：type、options：{responsive：leagens：{display：false、position： 'bottond'}、hover：{mode： '{{{aspals：' xaxes true、scalelabel：{display：false、labelstring： 'month'}}]、yaxes：[{display：true、scalelabel：{display：false、labelstring： 'value'}}]}、{display：true、text：title}}}}}}}}}}};バックグラウンド、バックグラウンドコラー：背景、PointBorderColor：背景、PointBackgroundColor：background、PointBorderWidth：}; var data = {labels：categories、dataset：[dataset]}; config.data = data; return config;}呼び出し方法：
<canvas id = "chart_weixinmember"> </canvas> var color = 'rgba（,,。）'; var categories = [" - " - "、" - "、" - "、" - "、" - " - " - " - " - " - "、 "最近の成長」、「新しいWechatメンバーはその日を追加しました」、カテゴリ、データ）; var ctx = document.getElementById（ "chart_weixinmember"）。
示された効果：
注：上記のコードを使用して、chart.jsを参照してください。
チャート中国のウェブサイトとドキュメント：
http://www.bootcss.com/p/chart.js/
http://www.bootcss.com/p/chart.js/docs/
グラフ英語のウェブサイトとドキュメント：
www.chartjs.org
www.chartjs.org/docs