استفاده از چارت های Pie در JavaScript
دوشنبه 20 اردیبهشت 1395در این مقاله با استفاده از تکنولوژی JavaScript چارتی طراحی می کنیم که در آن بتوانیم راندمان CPU را ببینیم. چارتی که طراحی خواهیم کرد از نوع Pie_chart خواهد بود.
در این مقاله ، به سادگی نحوه استفاده از چارت های Pie را خواهیم آموخت. از این چارت ها به سادگی می توان با استفاده از n3-chart.js بهره برد.
چارت های Pie
امروزه در اکثر وب سایت ها و یا برنامه های تلفن های همراه، چارت های Pie را می بینیم. کاربرد این گونه تکنولوژی ها (pie-charts, gauges, doughnut) گسترش بسیار زیادی داشته است. تصاویر زیر نمونه ای از این تکنولوژی هستند:
در این مقاله ما با استفاده از n3-charts.js ، چارت ها و gauge هایی به صورت بالا ایجاد خواهیم کرد.
n3-charts
n3-charts تکنولوژی ای است که از ترکیب D3.js و AngularJS ساخته شده است. این تکنولوژی از AngularJS و اتصال داده (data binding) برای ایجاد همچین چارت هایی استفاده می کند.
Use Case- نمایش میزان کارآیی CPU در یک چارت guage
ما از یک مثال بسیار متداول "نمایش میزان کارآیی CPU " با استفاده از pie-charts.js استفاده خواهیم کرد. مثالی که ما ایجاد خواهیم کرد به صورت یک gauge نمایش داده خواهد شد که میزان کارآیی CPU به وسیله درصد گذاری در آن مشخص شده است.(با بهره گیری از یک کتابخانه)
بیایید ساخت برنامه را شروع کنیم.
1-یک index.html ایجاد کنید و کدهای زیر را در آن وارد کنید.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pi Chart Samples</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body ng-app="chartapp" ng-controller="MainController">
<div class="container">
<div class="page-header">
<h2>
Pi Chart Samples</h2>
</div>
<div class="row">
<div class="col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">
<span class="glyphicon glyphicon-equalizer"></span>CPU Performance
</div>
<div class="panel-body">
<div style="height: 200px;">
<pie-chart data="data" options="options"></pie-chart>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js"></script>
<script src="pie-chart.min.js"></script>
<script src="app.js" type="text/javascript"></script>
</body>
</html>
در تکه کد بالا توجه داشته باشید که مرجع D3.js ، angular.js و Pie-charts.js به صورت استاندارد داده شده اند و چارت مورد نظر ما در یک پنل Bootstrap نمایش داده خواهد شد.
برای تولید Pie_chart ، داشتن تکه کد زیر الزامی است :
<pie-chart data="data" options="options"></pie-chart>
2- به جز index.html ، ما از یک AngularJS در داخل app.js استفاده خواهیم کرد. مرجع app.j را مطابق زیر تنظیم کنید:
var chartapp = angular.module('chartapp', ['n3-pie-chart']);
chartapp.controller('MainController', function($scope) {
$scope.options = {
thickness: 5,
mode: "gauge",
total: 100
};
$scope.data = [{
label: "CPU",
value: 20,
color: "#ff7f0e",
suffix: "%"
}];
//Function added to appear our guage chart as if it is showing data real time.
setInterval(function() {
$scope.data[0].value = parseInt((0.5 + Math.random() * 0.5) * 100);
$scope.$apply();
}, 2000);
});
3- صفحه index.html را در مرورگر باز کنید و نتیجه کار را ببینید. ما همچنین یک flavor of real time با استفاده از setInterval() به پروژه اضافه کرده ایم. با استفاده از این روش ما می توانیم اطلاعات مان را به صورت چارت پیاده سازی کنیم و ظاهر زیبایی را برای کاربر به نمایش بگذاریم.
- Java Script
- 2k بازدید
- 5 تشکر