chartjs 动态数据_使用ChartJS构建动态仪表板

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文件。 如果遇到未缩小版本，则会使错误更易读。

提示：在生产中，您将使用JavaScript的精简版，以使仪表板性能更高。

您的文件结构应如下所示：

├── 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"&