chartjs 动态数据
今天,我们将通过ChartJS的功能使用实时图表创建一个动态仪表板。 ChartJS是一个功能强大的,无依赖项JavaScript库,可通过canvas元素构建图形。 最重要的是,设计师可以轻松启动和运行。 我们将专注于库的各个部分,这些库使您可以快速启动并运行美观且实用的图表。 我们将从头到尾构建一个适合移动设备的仪表板。
寻找快速解决方案?
如果您正在寻找一种快速的解决方案,那么在Envato Market上可以找到大量的图表脚本 。 仅需几美元,它们便是在您的网站或应用程序中获得此功能的快速方法。 这是我们的最爱之一-“ Chartli”-用于创建交互式图形(看起来很漂亮!)
入门
我们将在HTML5 Boilerplate之上构建仪表板。 下载zip文件,或通过Git克隆存储库。 我们将项目目录命名为“ chartjs_dashboard”,并将所有文件直接放在此处。
# On the command line
git clone git@github.com:h5bp/html5-boilerplate.git chartjs_dashboard
接下来,我们将获取ChartJS。 转到在uminified版本raw.github.com/nnnick/Chart.js/master/Chart.js ,将其内容复制到您的js / plugins.js文件。 如果遇到未缩小版本,则会使错误更易读。
您的文件结构应如下所示:
├── 404.html
├── crossdomain.xml
├── css
│ ├── main.css
│ └── normalize.css
├── favicon.ico
├── img
├── index.html
├── js
│ ├── main.js
│ ├── plugins.js
│ └── vendor
│ ├── jquery-1.10.1.min.js
│ └── modernizr-2.6.2.min.js
└── robots.txt
注意:这不包括我们将不会使用的H5BP中包含的某些文件。
调色板
在开始对该站点进行编码之前,让我们开始设置一个在整个设计中都将使用的调色板。 通过这样做,我们可以建立将来的“样式指南”。 对于任何给定的设计,这都是常见的做法。
如果要在构建仪表板时考虑特定的品牌,请先使用品牌的颜色。 今天,我们将定义两种主要颜色和两种辅助颜色。 我们还将使用这些颜色的阴影或淡出版本。
- 深蓝色:
#637b85
- 绿色:
#2c9c69
- 黄色:
#dbba34
- 红色:
#c62f29
我们还将使用深蓝色#d0dde3
的浅色阴影。 最后,我们将利用灰度颜色。
ChartJS基础
ChartJS使用canvas元素。 canvas元素提供了仅JavaScript的接口,可将像素绘制到给定的矩形区域。 通常将它与SVG进行比较,后者提供了基于DOM节点的解决方案来在浏览器中创建矢量图形。 但是,绘制到canvas元素的像素不会保留在内存中,因此不会响应JavaScript事件。
但是,在技术讲座中已经足够了-我们如何快速开始使用ChartJS?
幸运的是, ChartJS主页上有很多示例,可以帮助我们快速入门。 基本模式是在HTML中创建canvas元素,使用JavaScript选择它,并在传递构建图表的数据时创建Chart。
<canvas id="something"></canvas>
<script>
var canvas = document.getElementById("something");
var ctx = canvas.getContext("2d");
new Chart(ctx).Line(data, options);
</script>
上面的示例假定您已将“ data”和“ options”定义为对象,并会相应地生成一个折线图。
在我们的示例中,我们将使用“甜甜圈”图,“线”图和“雷达”图。 这些图将代表不同的面向业务的指标,但是您当然可以采用并使其适应您的需求。
页面标记
让我们开始为页面布局定义一些基本HTML。
<div class="wrapper">
<header>
<div class="container clearfix">
<h1>Overview <span>July 8-12, 2013</span><a class="button">Change Date Range</a></h1>
</div>
</header>
<div class="container clearfix">
<div class="third widget doughnut">
<h3>Breakdown of Hours</h3>
<div class="canvas-container">
<canvas id="hours"></canvas>
</div>
</div>
<div class="third widget line">
<div class="chart-legend">
<h3>Shipments per Day</h3>
</div>
<div class="canvas-container">
<canvas id="shipments"></canvas>
</div>
</div>
<div class="third widget">
<div class="chart-legend">
<h3>Customer Service Assessment</h3>
</div>
<div class="canvas-container">
<canvas id="departments"></canvas>
</div>
</div>
</div>
<div class="push"&