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