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

最新推荐文章于 2025-11-23 07:06:58 发布

翻译最新推荐文章于 2025-11-23 07:06:58 发布 · 2.6k 阅读

文章标签：

#css #java #javascript #js #html #ViewUI

本文介绍了如何使用ChartJS库构建一个动态仪表板。ChartJS是一个轻量级的JavaScript库，适合创建实时图表。文章涵盖了从入门到实现甜甜圈图、线图和雷达图的全过程，以及如何使图表响应页面大小变化。此外，还讨论了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"></div>
</div>
<footer>
</footer>

在这里，我们可以看到我们有一个基本的页眉，中间和页脚部分。我们正在使用.wrapper类和.push类来创建一个粘性页脚（有关更多信息，请参见此处）。我们将创建我们的布局，使其首先适合移动设备使用，然后从那里扩大规模。我们将遵循一些技巧，但是这种结构将为我们完成很多工作。

在我们走得太远之前...

请注意，画布在媒体查询中不能很好地发挥作用。对于本教程，我们将创建一种解决方法，以允许在JavaScript中以不同大小重新绘制图表。

在main.js文件中，我们将需要一个由窗口调整大小触发的大小调整功能。在调整大小功能触发后，我们还需要一个“重新绘制”功能来触发。最后，当我们重新绘制图表时，我们不希望它们进行动画处理，好像这是第一次绘制它们。

(function(){
// set up the timeout variable
var t;
// setup the sizing function,
// with an argument that tells the chart to animate or not
function size(animate){
    // If we are resizing, we don't want the charts drawing on every resize event.
    // This clears the timeout so that we only run the sizing function
    // when we are done resizing the window
    clearTimeout(t);
    // This will reset the timeout right after clearing it.
    t = setTimeout(function(){
        $("canvas").each(function(i,el){
            // Set the canvas element's height and width to it's parent's height and width.
            // The parent element is the div.canvas-container
            $(el).attr({
                "width":$(el).parent().width(),
                "height":$(el).parent().outerHeight()
            });
        });
        // kickoff the redraw function, which builds all of the charts.
        redraw(animate);

        // loop through the widgets and find the tallest one, and set all of them to that height.
        var m = 0;
        // we have to remove any inline height setting first so that we get the automatic height.
        $(".widget").height("");
        $(".widget").each(function(i,el){ m = Math.max(m,$(el).height()); });
        $(".widget").height(m);

    }, 100); // the timeout should run after 100 milliseconds
}
$(window).on('resize', size);
function redraw(animation){
    var options = {};
    if (!animation){
        options.animation = false;
    } else {
        options.animation = true;
    }
    // ....
        // the rest of our chart drawing will happen here
    // ....
}
size(); // this kicks off the first drawing; note that the first call to size will animate the charts in.

如果这看起来有些令人生畏，请不要担心！在评论中提出问题，我们和Tuts +社区将帮助您充分理解！

一些CSS让我们开始

我们想建立一些基本CSS结构来开始。 HTML5 Boilerplate当然包括normalize和您可以更改的其他一些默认值，但是出于教程的考虑，我们将在“作者的自定义样式”行之后编写CSS。

html, body {
    height: 100%;
}
body {
    font-family: 'Source Sans Pro', sans-serif;
    color: #666;
}
/* button */
.button {
    cursor: pointer;
    text-decoration: none;
    font-size: 0.6em;
    font-weight: 400;
    text-transform: uppercase;
    display: inline-block;
    padding: 4px 6px;
    margin: 0 10px;
    position: relative;
    background: #ccc;
    color: #fff;
    box-shadow: 0 0 2px rgba(0,0,0,0.1);
    background: rgb(190,190,190); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(190,190,190,1) 0%, rgba(170,170,170,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(190,190,190,1)), color-stop(100%,rgba(170,170,170,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(190,190,190,1) 0%,rgba(170,170,170,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(190,190,190,1) 0%,rgba(170,170,170,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(190,190,190,1) 0%,rgba(170,170,170,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(190,190,190,1) 0%,rgba(170,170,170,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bebebe', endColorstr='#aaaaaa',GradientType=0 ); /* IE6-9 */
}
.button:hover {
    background: #637b85;
}
/* Header styles */
header {
    text-align: center;
    background: #637b85;
    color: #fff;
    margin-bottom: 40px;
}
header span {
    font-weight: 200;
}
header .button {
    font-size: 0.2em;
    top: -6px;
}

/* various containers */
.container {
    width: 200px;
    margin: 0 auto;
}
.canvas-container {
    min-height: 300px;
    max-height: 600px;
    position: relative;
}
.widget {
    position: relative;
    margin-bottom: 80px;
    background: #efefef;
    padding: 12px;
    margin-bottom: 30px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

在这里，我们为粘页脚定义了必要CSS，以及一个按钮类，一个自定心容器类，一个将小部件内部包含画布元素的类以及小部件本身。我们还需要通过将其包含在head标签中来添加我们为正文定义的Google字体。

<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400,700' rel='stylesheet' type='text/css'>

甜甜圈图

甜甜圈图很像饼图，只是它们的中间部分被切掉了。默认情况下，ChartJS定义应保留图形区域的50％；我们将保留该默认设置。创建甜甜圈图的代码如下所示。

var data = [
    {
        value: 20,
        color:"#637b85"
    },
    {
        value : 30,
        color : "#2c9c69"
    },
    {
        value : 40,
        color : "#dbba34"
    },
    {
        value : 10,
        color : "#c62f29"
    }

];
var canvas = document.getElementById("hours");
var ctx = canvas.getContext("2d");
new Chart(ctx).Doughnut(data);

在这里，您可以看到我们已经定义了甜甜圈图的数据和颜色。这就是使甜甜圈图工作所需的全部。但是，每个部分代表什么？不幸的是，ChartJS还没有一种简单的方法来为甜甜圈图定义标签。但是，我们可以创建自己的图例来描述每个不同的部分。修改甜甜圈小部件的html以包括以下内容。

<div class="third widget doughnut">
    <h3>Breakdown of Hours</h3>
    <p><a href="" class="button">Filter By Employee</a></p>
    <div class="canvas-container">
        <canvas id="hours"></canvas>
        <span class="status"></span>
    </div>
    <div class="chart-legend">
        <ul>
            <li class="ship">Shipping &amp; Receiving</li>
            <li class="rework">Rework</li>
            <li class="admin">Administrative</li>
            <li class="prod">Production</li>
        </ul>
    </div>
</div>

通过利用`：before`伪类，我们非常简单地在CSS中按类使用这些li。

.chart-legend ul {
    list-style: none;
    width: 100%;
    margin: 30px auto 0;
}
.chart-legend li {
    text-indent: 16px;
    line-height: 24px;
    position: relative;
    font-weight: 200;
    display: block;
    float: left;
    width: 50%;
    font-size: 0.8em;
}
.chart-legend  li:before {
    display: block;
    width: 10px;
    height: 16px;
    position: absolute;
    left: 0;
    top: 3px;
    content: "";
}
.ship:before { background-color: #637b85; }
.rework:before { background-color: #2c9c69; }
.admin:before { background-color: #dbba34; }
.prod:before { background-color: #c62f29; }

接下来，我们希望在甜甜圈的中心有一个很好的“竖起大拇指”。这涉及一些CSS技巧，包括版本的Dave叔叔的Ol'Papped Box，以使圈子变得敏感。我们将跨度与.status类一起使用以实现此圆。将以下规则添加到main.css中：

.widget.doughnut .status {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30%;
    height: 0;
    padding-top: 12%;
    padding-bottom: 18%;
    color: #444;
    margin-top: -15%;
    margin-left: -15%;
    font-size: 1.4em;
    font-weight: 700;
    text-align: center;
    border-radius: 50%;
    background-color: #aaa;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAF8AAABkCAQAAABK+CQQAAAACXBIWXMAAFKnAABSpwHUSB+cAAADGGlDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjaY2BgnuDo4uTKJMDAUFBUUuQe5BgZERmlwH6egY2BmYGBgYGBITG5uMAxIMCHgYGBIS8/L5UBFTAyMHy7xsDIwMDAcFnX0cXJlYE0wJpcUFTCwMBwgIGBwSgltTiZgYHhCwMDQ3p5SUEJAwNjDAMDg0hSdkEJAwNjAQMDg0h2SJAzAwNjCwMDE09JakUJAwMDg3N+QWVRZnpGiYKhpaWlgmNKflKqQnBlcUlqbrGCZ15yflFBflFiSWoKAwMD1A4GBgYGXpf8EgX3xMw8BSMDVQYqg4jIKAUICxE+CDEESC4tKoMHJQODAIMCgwGDA0MAQyJDPcMChqMMbxjFGV0YSxlXMN5jEmMKYprAdIFZmDmSeSHzGxZLlg6WW6x6rK2s99gs2aaxfWMPZ9/NocTRxfGFM5HzApcj1xZuTe4FPFI8U3mFeCfxCfNN45fhXyygI7BD0FXwilCq0A/hXhEVkb2i4aJfxCaJG4lfkaiQlJM8JpUvLS19QqZMVl32llyfvIv8H4WtioVKekpvldeqFKiaqP5UO6jepRGqqaT5QeuA9iSdVF0rPUG9V/pHDBYY1hrFGNuayJsym740u2C+02KJ5QSrOutcmzjbQDtXe2sHY0cdJzVnJRcFV3k3BXdlD3VPXS8Tbxsfd99gvwT//ID6wIlBS4N3hVwMfRnOFCEXaRUVEV0RMzN2T9yDBLZE3aSw5IaUNak30zkyLDIzs+ZmX8xlz7PPryjYVPiuWLskq3RV2ZsK/cqSql01jLVedVPrHzbqNdU0n22VaytsP9op3VXUfbpXta+x/+5Em0mzJ/+dGj/t8AyNmf2zvs9JmHt6vvmCpYtEFrcu+bYsc/m9lSGrTq9xWbtvveWGbZtMNm/ZarJt+w6rnft3u+45uy9s/4ODOYd+Hmk/Jn58xUnrU+fOJJ/9dX7SRe1LR68kXv13fc5Nm1t379TfU75/4mHeY7En+59lvhB5efB1/lv5dxc+NH0y/fzq64Lv4T8Ffp360/rP8f9/AA0ADzT6lvFdAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAUYSURBVHja1JxdTBxVFMd/O7vssgvLtxIQKrSVQluNiqVp0xAepKSpiaFKVEyMD2oQNGisifFJ06TRN2xjS2Js0geNHy9am5q0wRhNLNZUwI9aQmtDMbUtSFsKLOyye3xgl8KyHwM7uzv3vwkk99yZ+TF759xzzz0DQko/z8kl8ckt+U26pEEciZ4vtfAu6ZE7GpUjcr9K+EUyIEs1JC2irf6MGqmUi5ywlvUcpnX1J0wtvhvXsrZC3qNeDfwcnBFa7+FtclXAz8cRsb2BJhXwS7FHbHfwJBnmx6+IatlCmdnxtRj4JdSYHd9JeVSbg01mx8+jJIbV9INnDcUxrMWrYUkl/kbcMawOs+PXYYlhtZh78BRSG9M+S8DM+JupimkfNTd+U8yRD1fMPHhK2B3TPsegmfEfizMtjZsZv5QXscbscZ5hs+JrtPFInD6nuG1W/D10xPHqY5xc5bmTvjx/VIYlnj4VuxkzDZo0y99x4SekyYyJEqd0yqjE15fiNB9+kXwoHh3wt2Sn+dJUZfKF+EWSe++ThV8sX4s+JTDuk4VvlwOiV8fElci1kuH3G3leZ88ZjjKd2Ixo/IL8hTix5R2d5btEJ3SjVUuD7r5fccNc+BZayNPZ9wrfJh5OGavKOHH9Yp1hyGz4u1mru+9PeM2Fn0eL7oyBl3NGxOJGakecbMJSpzlmLnw7z0bYPYkmG5mJX9JmIP4Wdq6gt4smJsnEjg0NKxpa8LeFAH4C+PExwwyzeLjNNB68SJijE6PgrRzipRUdMctsENoS/BD8GYplAvjxM8csk9xknBEG+J4/F2WEDIt06uSapEL/yFuSbXTIZpNuSZW8clDcxuLv0LWuMko+2T+/OjbG82TSTlEKc9U2XuUp48Z+s9yWVOu8bDDm7hfzBtmkWht4BZtmwMTXznbSoSfYmrjfb+QT7iI96k4Uv5LPqCNdupQYfj6HeJr0yWsLBlsFOCKGuoKHceaihMf7aSGdGrQI1NHJwxFLVQCm6KWL35e1V7CPZ+Jk7ZOr/2hH6mUwro/tk5qFHE65VMhmeVn6JCDplF/eFStyUlfnriD+JumXYbkuc5JuHZcCwcY2XV/UVnKYAOysIZ/06yr7GAdN53zpWigkEsygs/StZLFowVxyz5eVaaipB+cnS1Xxc+ggS1182MUelfEz6aRCXXx4iHaV8TVaVcaHTJXx/RxVGf8b3lcX/2fe5Lqq+Bd5jQuq+n0P79CrbtAwwPGQ71Tz7ntVxl8bKuZWE788tPWtJr7G4/M7Y6o6zu08oDJ+IbtUxodtZKqM78KqMv6PTKmL388Rdcf+ZfZyUVX8ETroUXXaGqYtFLCphz9KJycWT79qqZtjS6MHlTRNz9IMt1r4PqbCYze1ZFEZXwvfClQLX8L3dtTCH+Wayvifh7/dpen+2qI8PClUDweXD55JXYdOBVMTPm7iTwv8r7zO1fBGG6dp1HHwGSYAGKKZKqqpYT1lFET5txHG6xfaIhQmYJF6PorzJi3008pfS1qsuCmmgmpqqOJe7iYracMqwAn2Rn4lM1SSURu1JHeK03wQ6S9feBacFFHOfWykmkpKyDW0NneMwxyIVu88X89jpwA7lmU75haEmagFMcuVQR6lrKOaGtZRSBZOHGRgW6iOXYmP9/AvP/AxvdGfNkuS9vituMnBTS755JNHAfnkkUM22WSThQM7GWSQgQ0IIAQQfMwwzQ3GGOEC5/iDy/hiXeb/AQDtquZeJxF4YgAAAABJRU5ErkJggg==);
    background-repeat: no-repeat;
    background-size: 30%;
    background-position: center;
}

可能最引人注意的元素是背景图片的数据URI 。这使我们避免了额外的HTTP请求，并且在语法上与使用实际的http url同义。我们还将此元素设置为绝对位于其.widget元素内，该元素先前已设置为相对位置。

现在，让我们继续设置小部件字体。我们仅在小部件内使用h3和p元素；这是随附CSS。

.widget p {
    margin-top: 0;
    text-align: center;
}
.widget h3 {
    margin: -12px 0 12px -12px;
    padding: 12px;
    width: 100%;
    text-align: center;
    color: #627b86;
    line-height: 2em;
    background: #d0dde3;
}

h3元素上的margin和padding规则允许该元素延伸到小部件的12px填充顶部上方的小部件元素的边缘。我们还将p元素的顶部边距设置为0，以使其更接近小部件的标题。

线图

ChartJS最有用的功能之一是某些图表允许多个数据集。这些数据集将依次绘制到同一图表上，从而可以将一个数据集与另一个数据集进行比较。折线图就是一个很好的例子。我们将使用两个数据集来探索此功能。

var data = {
    labels : ["Mon","Tue","Wed","Thu","Fri","Sat","Sun"],
    datasets : [
        {
            fillColor : "rgba(99,123,133,0.4)",
            strokeColor : "rgba(220,220,220,1)",
            pointColor : "rgba(220,220,220,1)",
            pointStrokeColor : "#fff",
            data : [65,54,30,81,56,55,40]
        },
        {
            fillColor : "rgba(219,186,52,0.4)",
            strokeColor : "rgba(220,220,220,1)",
            pointColor : "rgba(220,220,220,1)",
            pointStrokeColor : "#fff",
            data : [20,60,42,58,31,21,50]
        },
    ]
}
var canvas = document.getElementById("shipments");
var ctx = canvas.getContext("2d");
new Chart(ctx).Line(data, options);

在此新代码中需要注意的几件事：首先，我们重新使用了用于构建甜甜圈图的变量。这在JavaScript中完全有效，实际上会稍微减少脚本整体使用的内存。但是，这可能会在将来引起混乱，并且，如果您计划修改此代码以在生产中使用，则对您创建的每个新图表使用新变量可能会更有效。

接下来，折线图支持标签。这很重要，因为它可以避免创建基于HTML的图例。但是，数据点与给定的标签对齐也很重要。在此示例中，第一个数据集中的第一个数据点65匹配标签中的“ Mon”。

最后，这些数据集的fillColors是我们先前定义的颜色（深蓝色和黄色）的RGBa版本。我们通过将颜色输入到Photoshop的颜色选择器中来找到RGB值，但这可以使用许多颜色选择器工具之一来完成。

我们还将为一些按钮和易于理解的范围添加标记。最后一行小部件html如下所示。

<div class="third widget line">
    <div class="chart-legend">
        <h3>Shipments per Day</h3>
        <p><span>This Week</span> &mdash; <strong>Last Week</strong></p>
        <p><a href="" class="button">Change Date Range</a><a href="" class="button">Filter by Location</a></p>
    </div>
    <div class="canvas-container">
        <canvas id="shipments"></canvas>
    </div>
</div>

我们可以完善额外HTML，并帮助用户使用以下CSS连接日期：

.widget.line p span {
    color: #dbba34;
}
.widget.line p strong {
    color: #637b85;
    font-weight: 400;
}

雷达图

雷达图可用于将变量的选择提炼成单个可读的图，以大致了解不同变量之间的相互作用。例如，在我们的示例中，我们将基于提及某些关键字的次数来探索客户服务的想法。在雷达图上，绘制的点将创建形状。这种形状可以使我们对客户服务的有效性有一个整体的认识。

让我们看看它是如何创建的！再一次，我们将重用以前的变量。

var data = {
    labels : ["Helpful","Friendly","Kind","Rude","Slow","Frustrating"],
    datasets : [
        {
            fillColor : "rgba(220,220,220,0.5)",
            strokeColor : "#637b85",
            pointColor : "#dbba34",
            pointStrokeColor : "#637b85",
            data : [65,59,90,81,30,56]
        }
    ]
}
var canvas = document.getElementById("departments");
var ctx = canvas.getContext("2d");
new Chart(ctx).Radar(data, options);

随附HTML将如下所示：

<div class="third widget">
    <div class="chart-legend">
        <h3>Customer Service Assessment</h3>
        <p>based on words mentioned</p>
        <p><a href="" class="button">Track another word</a></p>
    </div>
    <div class="canvas-container">
        <canvas id="departments"></canvas>
    </div>
</div>

凭直觉，我们可以理解，向上偏右的形状要比向下偏左的形状更好。但是，我们不会在粒度，单变量级别上丢失图表中可供我们使用的特定数据。在这种情况下，经常会提到“粗鲁”一词，但是基于其他关键字，客户服务的总体感觉似乎是积极的。

使所有响应

我们已经设置好canvas元素以使用我们用来响应窗口大小调整JavaScript进行响应。现在，我们需要使用媒体查询使CSS响应。这是我们将用于执行此操作CSS。

@media only screen and (min-width:300px){
    .container {
        width: 300px;
        margin: 0 auto;
    }
}

@media only screen and (min-width:600px){
    .container {
        width: 580px;
        margin: 0 auto;
    }
    .third {
        float: left;
        width: 47.5%;
        margin-left: 5%;
    }
    .third:first-child {
        margin-left: 0;
    }
    .third:last-child {
        display: block;
        width: 100%;
        margin-left: 0;
    }
}

@media only screen and (min-width:960px){
    .container {
        width: 940px;
    }
    .third {
        float: left;
        width: 30%;
        margin-left: 2.5%;
        margin-right: 2.5%;
    }
    .third:first-child {
        margin-left: 0;
    }
    .third:last-child {
        margin-right: 0;
        margin-left: 2.5%;
        width: 30%;
    }
}
@media only screen and (min-width:1140px){
    .container {
        width: 1120px;
    }
}
@media only screen and (min-width:1360px){
    .container {
        width: 1300px;
    }
}

关于此CSS的第一件事要注意的是，所有媒体查询都仅基于最小宽度。这意味着我们正在从最小宽度的屏幕进行设计，并在向上移动时添加新规则。我们的设计不需要在每个断点处进行大量更改，但是这种模式是所有规模设计中的最佳实践。

我们可以在每个断点处看到一些基本的布局更改，包括主要容器元素的宽度以及我们在每个小部件上使用的对.third类的处理。在400以下，我们将所有小部件堆叠在一起。在400到600之间，我们使前两个窗口小部件为半角，而第三个窗口小部件（雷达图）为全角。最后，在960以上，我们使用三列内联。