第 12 章
? Bootstrap响应式图表设计 ?


本章介绍基于Bootstrap框架的响应式图表设计。其实，在Bootstrap框架中并没有提供完整的响应式图表功能，不过可以引入强大的、基于JavaScript的、完全开源的第三方图表插件，并基于Bootstrap框架良好的兼容性来整合这些第三方插件，最终设计出性能优越的响应式图表。
本章主要内容包括：
? 柱状图图表的设计
? 折线图图表的设计
? 饼状图图表的设计
12.1  图表设计概述
首先，介绍一款开源的、基于JavaScript的图形图表插件 —— ECharts，该插件功能很强大，可以帮助开发者实现各种功能的图表。
ECharts插件是一款基于Canvas的图表库，提供直观、生动、可交互、可个性化定制的数据可视化图表。ECharts创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。
ECharts提供的图形图表包括：折线图（区域图）、柱状图（条状图）、散点图（气泡图）、饼状图（环形图）、K线图、地图和弦图以及力导向布局图等，同时支持任意维度的堆积和多图表混合展现。在本章的应用中，选取其中比较基础的柱状图、折线图和饼状图来整合Bootstrap框架进行开发。
为了实现基于Bootstrap框架的响应式图表的设计，引用了Bootstrap框架、jQuery框架和ECharts插件所需要的脚本文件、样式文件和资源文件，并自定义了相关样式文件和资源文件。具体源代码目录如图12.1所示。
 
图12.1  源代码目录
如图12.1所示，index.html文件为响应式图表的页面，dist文件夹用于存放Bootstrap框架、jQuery框架和ECharts插件的脚本文件、样式文件和字体样式文件；assets文件夹用于存放自定义的辅助脚本文件和样式文件。
下面是页面所引用的部分重要css样式文件的代码。
【代码12-1】（详见源代码ch12目录中index.html文件）
01  <!-- Bootstrap core CSS -->
02  <link href="dist/css/bootstrap.min.css" rel="stylesheet">
03  <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
04  <link href="assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
05  <!-- Custom styles for this template -->
06  <link href="dist/css/dashboard.css" rel="stylesheet">
下面是页面所引用的部分重要js脚本文件的代码。
【代码12-2】（详见源代码ch12目录中index.html文件）
01  <!-- JAVASCRIPT INCLUDES -->
02  <!-- jQuery core JS -->
03  <script src="dist/js//jquery-1.11.3.js"></script>
04  <!-- Bootstrap core JS -->
05  <script src="dist/js/bootstrap.min.js"></script>
06  <!-- customer core JS -->
07  <!-- Just to make our placeholder images work. Don't actually copy the next line! -->
08  <script src="assets/js/vendor/holder.min.js"></script>
09  <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
10  <script src="assets/js/ie10-viewport-bug-workaround.js"></script>
11  <!—Echarts源文件引入 -->
12  <script src="dist/js/echarts.js"></script>
12.2  柱状图图表
本节介绍柱状图图表的设计过程。首先，需要添加DOM元素，并且为该DOM元素添加宽高设定。下面是相关的代码。
【代码12-3】（详见源代码ch12目录中index.html文件）
01  <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
02   <h1 class="page-header">Bootstrap 图表</h1>
03   <div id="id-echart-bar" style="height:500px;width:650px;"></div><hr>
04   ......
05  </div>
关于【代码12-3】的分析如下：
第03行代码通过div标签元素定义了一个id值为"id-echart-bar"的显示图表区域，同时定义了图表的高度和宽度样式（style="height:500px;width:650px;"）。
然后，继续添加关于ECharts插件所需的模块加载器的配置和所需图表的路径。
【代码12-4】（相对路径为从当前页面链接到echarts.js）
01  require.config({
02    paths: {
03      echarts: 'http://echarts.baidu.com/build/dist'
04    }
05  });
关于【代码12-4】的分析如下：
这段代码主要通过require.config()方法来配置加载器路径，而paths参数用于定义具体路径。
最后，定义echarts图表所需加载的数据，回调函数中可以初始化图表并驱动图表的生成。
【代码12-5】
01  require(
02    [
03      'echarts',
04      'echarts/chart/bar' // 使用柱状图需加载bar模块，此处可按需加载
05    ],
06    function (ec) {
07      // 基于准备好的dom，初始化echarts图表
08      var barChart = ec.init(document.getElementById('id-echart-bar'));
09      var barOption = {
10        title: {
11          text: 'ECharts 柱状图表示例'
12        },
13        tooltip: {
14          show: true
15        },
16        legend: {
17          data:['编程语言喜欢度百分比(%)']
18        },
19        xAxis: [
20          {
21            data : ["C&C++","Java","JavaScript","jQuery","Bootstrap","PHP"]
22          }
23        ],
24        yAxis: [
25          {
26            type : 'value',
27            axisLabel: {
28              formatter: '{value} %'
29            }
30          }
31        ],
32        series: [
33          {
34            "name":"喜欢度",
35            "type":"bar",
36            "data":[50, 70, 90, 60, 80, 65]
37          }
38        ]
39      };
40      // 为echarts对象加载数据
41      barChart.setOption(barOption);
42    }
43  )
关于【代码12-5】的分析如下：
第01～43行代码通过require()方法配置加载ECharts插件图表。
第02～05行代码用于加载柱状图所需的bar模块，此处可以根据需要加载指定的ECharts图表模块。
第08行代码用于获取【代码12-3】中第03行代码定义的DOM元素对象，后续将在该元素内显示柱状图图表。
第09～39行代码用于初始化定义柱状图图表参数；其中，第10～12行代码通过title属性定义图表标题；第13～15行代码用于定义是否显示提示信息（"show: true"）；第16～18行代码通过legend属性定义图表副标题；第19～23行代码通过xAxis属性定义图表X方向坐标；第24～31行代码通过yAxis属性定义图表Y方向坐标；第32～38行代码通过series属性定义柱状图的初始化参数。
第41行代码通过setOption()方法为echarts对象加载上面定义好的数据（通过第09行代码定义的barOption变量）。
下面测试一下该页面，柱状图图表的效果如图12.2所示。
 
图12.2  柱状图图表
12.3  折线图图表
本节介绍折线图图表的设计过程。首先，在页面需要添加图表的地方增加DOM元素，并且为该DOM元素添加宽高设定。下面是相关的代码。
【代码12-6】（详见源代码ch12目录中index.html文件）
01  <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
02   <h1 class="page-header">Bootstrap 图表</h1>
03   ......
04  <div id="id-echart-line" style="height:500px;width:650px;"></div><hr>
05   ......
06  </div>
关于【代码12-6】的分析如下：
第04行代码通过div标签元素定义了一个id值为"id-echart-line"的显示图表区域，同时定义了图表的高度和宽度样式（style="height:500px;width:650px;"）。
然后，继续添加关于ECharts插件所需的模块加载器的配置和所需图表的路径。
【代码12-7】（相对路径为从当前页面链接到echarts.js）
01  require.config({
02    paths: {
03      echarts: 'http://echarts.baidu.com/build/dist'
04    }
05  });
关于【代码12-7】的分析如下：
这段代码主要通过require.config()方法来配置加载器路径，而paths参数用于定义具体路径。
最后，定义echarts图表所需加载的数据，回调函数中可以初始化图表并驱动图表的生成：
【代码12-8】
01  require([
02    'echarts',
03    'echarts/chart/line' // 使用折线图需加载line模块，此处可按需加载
04    ],
05    var lineChart = ec.init(document.getElementById('id-echart-line'));
06    var lineOption = {
07      title: {
08        text: '未来一周气温变化',
09        subtext: '虚构图表'
10      },
11      tooltip: {
12        trigger: 'axis'
13      },
14      legend: {
15        data: ['最高气温', '最低气温']
16      },
17      toolbox: {
18        show: true,
19        feature: {
20          mark: {
21            show: true
22          },
23          dataView: {
24            show: true,
25            readOnly: false
26          },
27          magicType: {
28            show: true,
29            type: ['line', 'bar']
30          },
31          restore: {
32            show: true
33          },
34          saveAsImage: {
35            show: true
36          }
37        }
38      },
39      calculable: true,
40      xAxis: [{
41        type: 'category',
42        boundaryGap: false,
43        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
44      }],
45      yAxis: [{
46        type: 'value',
47        axisLabel: {
48          formatter: '{value} °C'
49        }
50      }],
51      series: [{
52        name: '最高气温',
53        type: 'line',
54        data: [11, 11, 15, 13, 12, 13, 10],
55        markPoint: {
56          data: [{
57            type: 'max',
58            name: '最大值'
59          }, {
60            type: 'min',
61            name: '最小值'
62          }]
63        },
64        markLine: {
65          data: [{
66            type: 'average',
67            name: '平均值'
68          }]
69        }
70      }, {
71        name: '最低气温',
72        type: 'line',
73        data: [1, -2, 2, 5, 3, 2, 0],
74        markPoint: {
75          data: [{
76            name: '周最低',
77            value: -2,
78            xAxis: 1,
79            yAxis: -1.5
80          }]
81        },
82        markLine: {
83          data: [{
84            type: 'average',
85            name: '平均值'
86          }]
87        }
88      }]
89    };
90    // 为echarts对象加载数据
91    lineChart.setOption(lineOption);
92  )
关于【代码12-8】的分析如下：
第01～92行代码通过require()方法配置加载ECharts插件图表。
第03行代码用于加载折线图所需的line模块，此处可以根据需要加载指定的ECharts图表模块。
第05行代码用于获取【代码12-6】中第04行代码定义的DOM元素对象，后续将在该元素内显示折线图图表。
第07～89行代码用于初始化定义折线图图表参数。
第07～10行代码通过title属性定义图表标题。
第11～13行代码用于定义是否显示提示信息（"show: true"）。
第14～16行代码通过legend属性定义图表副标题。
第17～38行代码通过toolbox属性定义图表工具箱（显示在图12.3的右上角）。
第39行代码通过calculable属性定义图表的可拖拽计算特性（calculable: true）。
第40～44行代码通过xAxis属性定义图表X方向坐标。
第45～50行代码通过yAxis属性定义图表Y方向坐标。
第51～88行代码通过series属性定义两条折线图（最高气温折线图和最低气温折线图）的初始化参数。
第91行代码通过setOption()方法为echarts对象加载上面定义好的数据（通过第06行代码定义的lineOption变量）。
下面测试一下该页面，折线图图表的效果如图12.3所示。
 
图12.3  折线图图表
12.4  饼状图图表
本节介绍饼状图图表的设计过程。首先，在页面需要添加图表的地方增加DOM元素，并且为该DOM元素添加宽高设定。下面是相关的代码。
【代码12-9】（详见源代码ch12目录中index.html文件）
01  <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
02   <h1 class="page-header">Bootstrap 图表</h1>
03   ......
04  <div id="id-echart-pie" style="height:500px;width:650px;"></div><hr>
05   ......
06  </div>
关于【代码12-9】的分析如下：
第04行代码通过div标签元素定义了一个id值为"id-echart-pie"的显示图表区域，同时定义了图表的高度和宽度样式（style="height:500px;width:650px;"）。
然后，继续添加关于ECharts插件所需的模块加载器的配置和所需图表的路径。
【代码12-10】（相对路径为从当前页面链接到echarts.js）
01  require.config({
02    paths: {
03      echarts: 'http://echarts.baidu.com/build/dist'
04    }
05  });
关于【代码12-10】的分析如下：
这段代码主要通过require.config()方法来配置加载器路径，而paths参数用于定义具体路径。
最后，定义echarts图表所需加载的数据，回调函数中可以初始化图表并驱动图表的生成：
【代码12-11】
01  require(
02    [
03      'echarts',
04      'echarts/chart/pie' // 使用饼状图需加载pie模块，此处可按需加载
05    ],
06    var pieChart = ec.init(document.getElementById('id-echart-pie'));
07    var pieOption = {
08      title: {
09        text: '家庭支出',
10        subtext: '虚构图表',
11        x: 'center'
12      },
13      tooltip: {
14        trigger: 'item',
15        formatter: "{a} <br/>{b} : {c} ({d}%)"
16      },
17      legend: {
18        orient: 'vertical',
19        x: 'left',
20        data: ['日常开支', '投资理财', '奢侈消费', '子女教育', '家庭备用金']
21      },
22      toolbox: {
23        show: true,
24        feature: {
25          mark: {
26            show: true
27          },
28          dataView: {
29            show: true,
30            readOnly: false
31          },
32          magicType: {
33            show: true,
34            type: ['pie', 'funnel'],
35            option: {
36              funnel: {
37                x: '25%',
38                width: '50%',
39                funnelAlign: 'left',
40                max: 1548
41              }
42            }
43          },
44          restore: {
45            show: true
46          },
47          saveAsImage: {
48            show: true
49          }
50        }
51      },
52      calculable: true,
53      series: [{
54        name: '支出类型',
55        type: 'pie',
56        radius: '55%',
57        center: ['50%', '60%'],
58        data: [{
59          value: 3000,
60          name: '日常开支'
61        }, {
62          value: 3200,
63          name: '投资理财'
64        }, {
65          value: 1000,
66          name: '奢侈消费'
67        }, {
68          value: 1600,
69          name: '子女教育'
70        }, {
71          value: 1600,
72          name: '家庭备用金'
73        }]
74      }]
75    };
76    // 为echarts对象加载数据
77    pieChart.setOption(pieOption);
78  )
关于【代码12-11】的分析如下：
第01～78行代码通过require()方法配置加载ECharts插件图表。
第04行代码用于加载饼状图所需的pie模块，此处可以根据需要加载指定的ECharts图表模块。
第06行代码用于获取【代码12-9】中第04行代码定义的DOM元素对象，后续将在该元素内显示饼状图图表。
第07～75行代码用于初始化定义饼状图图表参数。
第08～12行代码通过title属性定义图表标题。
第13～16行代码用于定义是否显示提示信息（"show: true"），第15行代码通过formatter属性定义格式化参数。
第17～21行代码通过legend属性定义图表副标题。
第22～51行代码通过toolbox属性定义图表工具箱（显示在图12.4的右上角）。
第52行代码通过calculable属性定义图表的可拖拽计算特性（calculable: true）。
第53～74行代码通过series属性定义饼状图的初始化参数。
第77行代码通过setOption()方法为echarts对象加载上面定义好的数据（通过第07行代码定义的pieOption变量）。
下面测试一下该页面，饼状图图表的效果如图12.4所示。
 
图12.4  饼状图图表
12.5  本章小结
本章主要介绍了应用Bootstrap框架和ECharts插件设计响应式图表的方法，主要包括柱状图图表、折线图图表和饼状图图表等方面的内容，希望对读者有一定的帮助。