图表分析201前言和chart js安装

1、20-1这一章前言和 Chart.js如何制作图表来分析报名资料， 安装：§ 分析票种的报名人数§ 分析票种的总金额§ 分析票种的报名人数，并根据状态( 报名尚未完成、报名)§ 分析报名人数，并根据状态制作图表需要用到前端 Java Script 套件，例如： § Chartkick 这一套搭配 RailsHelper 可以使用最简单，甚至不需要写 Java Script 代码，有§ Chart. js 这一套好用又漂亮，需要写 JavaScript§ D3. js 这一套功能最强，是专业的数据可视化套件，但也比较复杂示范会

2、使用 Chart.js，这也有中文文档。Chart. js安装 Chart. js有 chart-js- rails gem 可以安装，但是因为只有报表那一页有用到，所以我们就不包进 asset pipeline 了，而是使用 CDN 让用户直接从 CDN 服务器回去。的 CDN服务器 Boot CDN上可以找到 Chart.js，编在国内辑把该位置贴上去： app/ views/ admin/ events/ show. html. erb+<script src="/ cdn. bootcss. com/ Chart. js/ 2 . 5 . 0 / Chart. bund

3、le. min. js" ></ script><h 1 ><% = event. name % ></ h 1 >这样用户进到这一页，就可以使用 Chart.js 了。让我们试试看效果， 再次编辑，贴上一段范例： app/ views/ admin/ events/ show. html. erb<script src="/ cdn. bootcss. com/ Chart. js/ 2 . 5 . 0 / Chart. bundle. min. js" ></ script><

4、h 1 ><% = event. name % ></ h 1 ><p> <% = link_to " 打开前台", event_path( event), : target => " _blank", : class => " btn btn- primary" % >app/ views/ admin/ events/ show. html. erbapp/ views/ admin/ events/ show. html. erb 本课程小师弟众筹群内学员参考学习

5、，用于商业传播！本群外任何课程均为二手课程请认准 Q 群：174309719</ p>+<canvas id=" my Chart" width=" 400 " height=" 200 " ></ canvas><script>varvarctx = document. get Element By Id(" my Chart"); my Chart = new Chart( ctx, type: ' bar', data: labels: &quo

6、t; Red", " Blue", " Yellow", " Green", datasets: label: '# of Votes'," Purple"," Orange",data: 12 , 19 , 3, 5, 2, background Color: ' rgba( 255 , 99 , 132 ,' rgba( 54 , 162 , 235 ,' rgba( 255 , 206 , 86 ,' rgba( 75 , 192

7、, 192 ,3 ,0 . 2 )',0 . 2 )',0 . 2 )', 0 . 2 )',' rgba( 153 , 102 , 255 , 0 . 2 )',' rgba( 255 , 159 , 64 , 0 . 2 )', border Color: ' rgba( 255 , 99 , 132 , 1 )',' rgba( 54 , 162 , 235 ,' rgba( 255 , 206 , 86 ,' rgba( 75 , 192 , 192 ,1 )',1 )

8、9;,1 )',' rgba( 153 , 102 , 255 , 1 )',' rgba( 255 , 159 , 64 , 1 )', border Width: 1 , options: scales: y Axes: ticks: begin At Zero: true );</ script>本课程小师弟众筹群内学员参考学习，用于商业传播！ 课程请认准 Q 群：174309719 本群外任何课程均为二手这只是个 Chart. js 范例，并没有用到数据库的真实资料。在继续下去之前，请删掉它。本课程小师弟众筹群内学员参考学习，用于商业

9、传播！ 课程请认准 Q 群：174309719 本群外任何课程均为二手20-2分析不同票种的报名人数最常见的数据分析模式，就是根据不同的报名人数。计算数量或总和，例如我们来分析不同票种编辑app/ controllers/ admin/ events_controller. rbdef show event = Event. find_by_friendly_id!( params: id)+colors=' rgba( 255 , 99 , 132 ,' rgba( 54 , 162 , 235 ,' rgba( 255 , 206 , 86 ,' rgba(

10、 75 , 192 , 192 ,0 . 2 )',0 . 2 )',0 . 2 )',0 . 2 )',' rgba( 153 , 102 , 255 , 0 . 2 )',app/ controllers/ admin/ events_controller. rb以下数据沿用我们在 18- 1 制作管理报名资料 所产生的假活动和报名数据。本课程小师弟众筹群内学员参考学习，用于商业传播！ 课程请认准 Q 群：174309719 本群外任何课程均为二手+' rgba( 255 , 159 , 64 , 0 . 2 )'ticket

11、_names = event. tickets. map |t| t. name data 1 = labels: ticket_names, datasets: label: "# of Registrations",data: event. tickets. map |t| t. registrations. count , background Color: colors,border Width: 1 编辑app/ views/ admin/ events/ show. html. erb<script src="/ cdn. bootcss. co

12、m/ Chart. js/ 2 . 5 . 0 / Chart. bundle. min. js" ></ script><h 1 ><% = event. name % ></ h 1 ><p> <% = link_to " 打开前台", event_path( event), : target => " _blank", btn- primary" % ></ p>: class=>" btn+<canvas id

13、=" my Chart 1 " width=" 400 " height=" 200 " ></ canvas><script>varvarctx 1 = document. get Element By Id(" my Chart 1 "); my Chart 1 = new Chart( ctx 1 , type: ' bar',data: <% = raw data 1 . to_json %>, options: scales: y Axes: ti

14、cks: begin At Zero: true );</ script>app/ views/ admin/ events/ show. html. erb本课程小师弟众筹群内学员参考学习，用于商业传播！ 课程请认准 Q 群：174309719 本群外任何课程均为二手+<hr>我们在 controller 中准备了变量就是要餵给 Chart.js 的分析资料，在 View中需要把这个 Ruby 变量透过转成 Java Script变量。这个输出后的数据格式长这样： Chart. js参数说明： type: ' bar' ,/ 长条图 data: &qu

15、ot; labels": " Guest","VIP 第一期","VIP第二期", / 横轴的标籤有哪些 " datasets": " label": "# of Registrations",/ 数据集的名称 data1 to_json data 1本课程小师弟众筹群内学员参考学习，用于商业传播！ 课程请认准 Q 群：174309719 本群外任何课程均为二手" data": 324 , 346 , 330 , / 数据( 这是数组)"

16、; background Color":" rgba( 255, 99, 132, 0.2)"," rgba(54, 162, 235, 0.2)"," rgba( 255, 206, 86, 0.2)"," rgba(75, 192,a( 153, 102, 255, 0. 2)","rgba( 255, 159, 64, 0. 2)", 192, 0. 2)","rgb/ 长条的颜色 " borderWidth": 1/ 要有框线 , opt

17、ions: scales : y Axes : ticks: begin At Zero : true/ X 轴要从 0 起跳 详细关于这个资料结构的说明，可以参考 Chart.js 文档。本课程小师弟众筹群内学员参考学习，用于商业传播！ 课程请认准 Q 群：174309719 本群外任何课程均为二手20-3分析票种的总金额跟上一节类似，但改成计算报名的总金额。编辑app/ controllers/ admin/ events_controller. rb+ount+ data 2 = labels: ticket _names , datasets: label: '# of Amo

18、unt ', data:t. price , event. tickets. map |t| t. registrations. by_status(" confirmed"). c*background Color: colors,border Width: 1 其中 data 的部分变成计算报名的数量乘上该票价。app/ controllers/ admin/ events_controller. rb 本课程小师弟众筹群内学员参考学习，用于商业传播！ 课程请认准 Q 群：174309719 本群外任何课程均为二手编辑加上图表： app/ views/ admi

19、n/ event/ show. html. erb<hr>+<canvas id=" my Chart 2 " width=" 400 " height=" 200 " ></ canvas><script>varvarctx 2 = document. get Element By Id(" my Chart 2 "); my Chart 2 = new Chart( ctx 2 , type: ' bar',data: <% = raw da

20、ta 2 . to_json %>, options: scales: y Axes: ticks: begin At Zero: true );</ script>这样就完成了。 Guest 票因为票价是 0 元，所以总金额也是 0。app/ views/ admin/ event/ show. html. erb本课程小师弟众筹群内学员参考学习，用于商业传播！ 课程请认准 Q 群：174309719 本群外任何课程均为二手20-4分析票种的报名人数， 并根据状态在上上节 " 不同票种的报名人数" 图表中，把报名未完成和报名的数据都算在一起了，有没有办法

21、可以根据不同状态算呢？ 编辑app/ controllers/ admin/ events_controller. rb- data 1 = labels: ticket _names , datasets: label: "# of Registrations ", data: event. tickets. map |t| t. registrations. count background Color: colors,border Width: 1 , app/ controllers/ admin/ events_controller. rb 本课程小师弟众筹群内学

22、员参考学习，用于商业传播！ 课程请认准 Q 群：174309719 本群外任何课程均为二手+status_colors = " confirmed" => "# FF 6384 "," pending" => "# 36 A 2 EB"+ data 1 = labels: ticket_names,datasets: Registration: STATUS. map do |s| label: I 18 n. t( s, : scope => " registration. statu

23、s"),data: event. tickets. map |t| t. registrations. by_status( s). count , background Color: status_colors s,border Width: 1end参数其实就是资料集的数组，本来只有一个资料集，现在改成透过产生两个资料集，分别是报名未完成和报名。让我们观察一下实际输出的数据格式长怎样： data: " labels": " Guest" ," VIP 第一期"," VIP 第二期",/ 这是 Y 轴的

24、标籤" datasets" :/ 这是第一个资料集 " label" : " 报名尚未完成",Registration: STATUS. mapdatasets本课程小师弟众筹群内学员参考学习，用于商业传播！ 课程请认准 Q 群：174309719 本群外任何课程均为二手" data": 160 , 164 , 160 , " background Color" :"# 36 A 2 EB" , " border Width" : 1, / 这是第二个资料

25、集 " label" : " 报名 "," data": 164 , 182 , 170 , " background Color" :"# FF 6384 " , " border Width" : 1, 当有多个资料集时，它会沿着 Y 轴的标籤依序画上去。本课程小师弟众筹群内学员参考学习，用于商业传播！ 课程请认准 Q 群：174309719 本群外任何课程均为二手20-5分析报名人数， 并根据状态分析从第一天到的报名人数，并根据状态。其中 labels 参数是Y 轴，

26、这里编辑改成用 dates 数组， 代表从有人报名的第一天到app/ controllers/ admin/ events_controller. rb。+if event. registrations. any?dates = ( event. registrations. order(" id ASC"). first. created_at. to_date. Date.today). to_a+_at + data 3 = labels: dates,datasets: Registration: STATUS. map do |s| : label => I 18 n. t( s, : scope => " registration. status"),: da