00:00
嗯,之前啊,咱们这出现点问题,刚才我课下我调查了一下啊,这个啥原因呢?是因为啊,我这写错了啊,什么地呢,我这边写个页呢,我传了个参数叫页,但是我发现呢,我封装的时候这个参数不叫ear。这个参数叫call,什么call time是吧,所以我得改一下啊,就是我把它统一了这个地方传参数叫做tell和year,你这边才能用这两个参数,我刚才呢,恰恰这边用的是那个叫protime啊,所以导致呢,这边用的不对啊,所以这边就出错了啊,所以呢,我们这边呢,把这边呢给大家来启动一下,重新启一下,启完了以后啊,如果没问题的话,咱们的数据出来了,咱们才能把它用图表的方式给它展现出来啊,就是这样。呃,所以呢,我们这里呢,稍微的咱们来看一看啊,因为上节课呢这一块呢,出现点问题啊。好了啊,现在呢,我这边呢就直接来了啊,我们我们也不用刷新了,直接点查询就行了,因为这些条件都是正确的,有三条数据,所以点击查询,点完以后大家看一下一个COLO2个三个,那不就意味着把三条数据已经拿到了吗?那拿到以后那就好办了,为什么?因为我就需要把它用图表的方式展现出来就可以了,所以接下来呢,咱们要把那个数据呢,用图表的方式给他展现,这个图表咱们之前给大家介绍过,咱们要用到的是一个一的,我这里呢是提前给大家准备好的,为什么呢?因为咱们这个网太慢了啊,太慢的话,我先去找的话就特别的不方便啊,所以呢,我课下呢时间打开了,这个呢叫一叉的,这个是百度的一个插件啊,一个图表插件。
01:40
那么这个插件呢啊,我们一点它就会到这个页面来啊,就到这个页面来,这个页面当中有一个叫文档,这个文档当中有很多的东西,记住啊,这个百度的一叉来非常不错,为什么呢?首先它用的人多,第二个它的文档非常的丰富啊,非常的丰富啊,那这里呢,就有个教程,这个教程当中啊,就会告诉你怎么去用它,所以啊,我们没有必要说专门写个课件,告诉你怎么用不用他的文档非常的不错啊,咱们就这么做就行了,首先第一个他说要获取一叉的,这个不用你们获取了,咱们事先是有的,在我们当前的这个位置呢,咱们可以看看啊,来咱们找一下我们这边,我们再看看咱们的这个GS框架里面有个叫一的啊,这里面就有这个,有的情况下呢,我们这里呢,就可以来啊。
02:25
在我们当前的这个这块里面呢,我们就可以把这个一串的呢,给它原封不动拷贝过来啊,这个是我们事先准备好的,那事先准备好的就拷贝过来就行了,拷贝过来以后记住,那这个时候呢,它由于啊,它是一个我们的什么呢?是一个我们的脚本文件,那所以呢,我得把咱们那个view啊,把这个该停的停了啊停了停了之后把这个呢,我得准备一下,我正好呢参考一下咱们之前那个位,我把里面的代码呢,我是原封不动给他拷贝过来啊,拷贝拷贝以后把这个view页面准备好,我这里就不需要这个form了啊,不需要它了,但你不需要它的话,可是你这些东西我们还需要,所以这个呢,我们也暂时先不要了啊,所以啊,这个我们的注释太多了,把这个注释呢,该去的去掉它啊,这样的话感觉呢,会要清爽一些啊,否则太东西太多不是很好啊。
03:14
好,把这个去掉,把这个呢,我们也去掉啊好了,行,这是一个最基本的页面,那最基本的页面当中,我们要参考一下它的文档,说明了它这个文档当中是这么说的,首先要引入我们的一很简单,要引入它,这个引入呢就是加一个script,一个我们标签就行了,那咱们这就加一下,在这里我写上叫监括号啊,我们的script,然后呢,在这里呢,我们写上S2C等号啊,然后呢,我们写上它,然后呢,接下来我们这边写上咱们就叫做zquiry,那咱们叫zquiry里面就应该有一个我们的E,诶就是它了,你把这个文件就等同于给它加载进来了,你加载进来以后该如何来使用呢?他说了要绘制一个图表,就在网页当中啊,显示一个图表啊,他说怎么做呢?首先我们需要一个容器啊,一个页面容器干嘛呢,来容纳这个图表,所以啊,他说了在包的里面需要增加个div,那所以呢,我就把这个div。
04:15
开杯呢,给它拷贝,拷贝以后放到我的包的里面,这个包的呀,我确认一下咱们这个地方来给它缩进一下,缩进以后我在上面给它加一个啊,加一个咱们就叫div就行了,这个div呢,给了一个闷,后面呢叫样式,样式当中有宽和高,那有一个宽和高在这里面啊好,那这个咱们准备好了以后啊,我们这写上吧,咱们来写上来,我在这儿写上,咱们叫做图表容器啊,图表主件容器来容纳啊,来容纳我们的图表用的好,那接着往下看,下面说了,这个时候呢,我们就可以通过一个对象的引内的方法来初始化我们的图表了,那么咱们看看下面,下面啊,它就有一大堆的javascript代码了,所以我们就原封不动拷贝一下,这个咱们就直接来看就行了,拷贝,拷贝之后放过来,放过来以后其实同学们看一看啊,首先咱们看第一句话。
05:13
第一句话,有一个叫一叉,这什么意思呢?这个呀,因为你之前导入了这个脚本文件,它里面是有个对象的,这个对象就叫做一的对象,那么这个对象提供了一个方法叫类,顾名思义叫初始化,然后呢,你往这看是什么意思,这叫document get element BYD,表述的是获取页面当中一个叫做的ID的元素。Men是不是在这儿呢?它的ID不就是吗?所以就等同于把这个对象我就取到了,取到了以后把这个呢,我们的对象传到以内的方法,说的简单点就告诉你,我的容器准备好了,你要初始化准备要画图了,那么这个时候我的图表对象就创建好了,记住这是那个图表对象,可是你图表对象该画什么图呢?那么这个时候下面就有一个配置信息,这个配置信息就是用来画图的配置,所以这边有一个叫图表对象,有一个叫做点什么东西啊,叫site option来设定我的配置,那么我的配置有了之后,我就知道这个图形是什么样子了,所以咱们这边就是我图表的相关配置,咱们别的先不看,你就先看一下大括号是什么东西。
06:28
是不是我们之前讲过那个阶层的事儿啊,咱们讲过在我们的阶层当中,我们是不是大括号表示个对象啊,中括号表什么东西表示集合自数组吧,哎,就这个意思,所以说白了,这其实就是个阶层对象啊,就是个阶层对象,然后呢,我把这个对象呢,作为一个参数传给这个方法来设定我们的基本配置,那我们就来做个对比吧,看看它这里到底怎么回事儿,我们这里啊,咱们看看不知道我的网速怎么样啊,大家看我们这里是不是会有很多的什么东西啊,很多的这些图表吧,对不对,其中有一个就是它了,这个图表记录,这个图表就是我们刚才看到这个东西,那我就点一下看它能不能出来啊。
07:10
有点这个诶还可以啊,大家可以看到你会发现这个呢,跟我们刚才的这个呢,就有点儿像了啊,只不过呢,有一些参数是一样的,但是这个内容不一样,那比方说咱们看这。看这地方这个写的什么month是呃,什么Monday吧啊,Tuesday之类的是吧,这是什么星期几吧,那你再看我们这个地方写的什么东西啊,衬衫,羊毛衫,那其实指的是我横向的这个数据,对吗?你再看我们的这个,这个是不是什么一百二二百,你再看我们的这边是不是我的数据啊,所以也就意味着它应该是一个图形的一个什么设定,横向纵向分别都是什么含义啊,文字数据都是什么样子的,他就告诉你了,所以啊,我们现在就可以演示一下,反正都是照着例子来的,咱们也没自己写,所以我们就给他启动一下啊,启动以后看看我们这个能不能正确的出来,如果能出来的话,你就记住了,以后你想做图表的话,你就参考这里面的东西,我一看,哎哟,咱们的老那什么咱们的经理啊,想让我做这样的一个什么呢图表,我就看看需要传哪些参数就行了啊,所以啊,我现在呢就来试一试来吧,我这里呢准备给他来后退,后退以后呢,我们直。
08:22
直接点查询点。点完以后你看是不是出来了,哎,这就是我们的一个DEMO,一个例子,但是我们说了数据没问题,反正DEMO是能跑的嘛,能跑是能跑,可是这不是我想要的,我想要的是什么,我想要的是不是把我的查询结果给他展现出来啊,那好了,那我的查询结果是什么?我的查询结果记入,咱们对比一下,大家看这个东西,这什么东西啊,这叫入门示例吧,那么入门示例的话,你会发现是不是我这个图表的名称对吧?然后呢,你看这个销量,这个销量指的是我上面这个什么说明,然后呢,下面这个呢,是我们的销量,这个销量是什么呢?具体的数值,哎,所以它的高度,我们的这个数值决定了它的高度啊,就是这个意思,那这是什么东西啊?
09:14
这是我们水平的这些名称吧,那所以这个咱们能明白那就太好了,为什么?因为我们的数据恰恰也可以展现成这个样子,比方说我想统计的是什么呢?2018年每个月份当中的那个通话时长,那我下面是不是可就可以是月份呢?我这个高度是不是就可以是时间呢,市场吧,那所以这就好办了,为什么我就直接写了啊来,咱们写上咱们叫做什么呢?用户啊,通话信息的什么呢?统计好,然后这个呢,我就写上啊,咱们写上叫通话,咱们的什么呢?咱们就叫时长吧,通话时长。那你这个叫通话时长,我这个也叫通话时长啊,那这个是什么东西,这应该是我们的月份吧,这个月份我们之前是不是恰恰有啊,但是我们有是什么,我们是不是有查询的那个ID啊,对吧,这个没关系,为什么咱都了解你有这个ID,你得到它对应的年月日能不能得到,能吧,那我就先不管它了,我就先把这个ID给它取下来啊,所以我这里呢,就把它去掉,去掉以后我要将我之前的三条数据给它循环便利放在这个位置,我该怎么做,那这个时候我要做的就是循环便利,它应该有标签了,这个标签我们这边有一个什么呢?叫做间光号,叫百分号圈A有个叫叫标签库,标签库当中有一个我们叫C标签,然后呢,这里有一个叫我们的UR,这里我们找一下,就是我们的核心标签库,核心标签库当中这里面就有了,我们叫间括号,我们写上C,咱们叫做什么呢?For it,然后写完以后,那么。
10:53
我们有开始,有结束,那么中间的这个位置我该写上了,咱们叫it,它表述的是获取我的循环便利的集合,这个循环便利的集合恰恰是我们之前保存的数据,就是我们的Co lock,所以把它拿过来放到这里面,放到里面以后,然后呢,把每一次循环的用一个变量来表示,咱们就叫call lock啊,就这么写,然后我们这里的begin end和这个step呢,我们是不需要的,它表述的是从头到尾一个一个循环,这个表述的是循环状态信息啊,我们这也不管它,我们只要拿到它就可以了,拿到它以后,那么我在这里呢,就直接来了,我写上啊,写上什么呢?点咱们叫上,我们叫扣。
11:39
啊,就是通话那个次数,我来这里面可以给他来写上一下,然后呢,写个逗号啊,写个逗号就可以了啊好了,我这么写完以后,同学们想想我的那个,哎,不对,这应该是那个date ID吧,对吧,这是那个月份的那个I对吧,那我下面这个才应该是我的那个通话的什么吧,通话的时长是吧?诶,所以我这应该再拷贝一下,拷贝以后这个地方应该是我的sum,我的号,诶别写错了啊,这要错的话出不来了,嗯,我确定一下,咱们点一下。
12:10
点完以后咱们这个叫,诶没有不是大写的,是小写的啊,我这差点写错了啊,咱们这里呢,应该是小写的三扣,诶就是这样,你这么写完了以后,那我们的数据就应该能够出来了,咱们唯一的问题呢,是我们这个ID不是那个具体的年月日啊好,那我现在把它停一下,咱们先看一看,只要没问题,那你再把它转换成年月日也是好办的啊,并且如果有缓存的话就更快,嗯,所以呢,我要启动一下,没问题,我们就可以看一看我们展示的结果了啊。好了啊,然后呢,我现在呢就来,那我现在呢就直接刷新吧,反正就走它了嘛,参数也都是一样的,所以呢,我直接来刷新。
13:00
刷新以后大家看对不对啊,是不是啊,可以吧,可以啊,只是我们这个地方怎么了,这个应该是年月日就会更好点吧,对吧,年日只不是我们这边呢,好像是什么呢,三四这个ID啊不太好,我们三条记录三个柱状图没问题吧,诶没问题啊,这是对的,我们也可以通过它的参数呢,把这个小柱子呢,给它变得细一些,当然我们找的月份少嘛,对不对,那我可以再试一试啊,咱们再找一个试试啊,咱们也不光只有他,还有别人呢。这个叫做这个吧,拷贝一下,拷贝以后呢,看看他啊,他有没有打过电话呢,来回车。诶,这还稍微多点是吧,但是多也就打过一次是吧?啊就是这样行吧,这个咱就不管它了,咱们也就意味着通过这种方式呢,是可以把咱们的数据展现出来的,但这个展现呢,会感觉它不太好,为什么不太好呢?因为我们这个展现你会发现一个问题,什么问题,我们现在是不是只能有一个数据统计出来啊,但咱们之前是不是统计了两个信息,一个是通话时长,一个是我们的通话的什么总的时间吧,对不对,比方说也就意味着我打了多少次,每那个总共打了多少时间,我的两个一块儿统计啊,但你现在只有一个,难道我要再写一个我们的图表吗?不用。
14:19
我们这里啊,大家看我们这里面,其中还有另外一个图表,这个图表在这儿。这个图表可以同时展现多个维度的数据啊,不见得只有一个维度,所以咱们用它也可以,那用它的话,我们怎么来用呢?我们在这里啊,事先给大家打开了,在这儿打开,打开以后就是这个样子啊,就这样子,这个呢是某地区的蒸发量和降水量,那这里面就意味着有两个指标可以同时显示出来,而且它用不同的颜色来标识了,而且这里面还有平均值,最大值和最小值,你看这不挺好吗?所以啊,这种图表呢,我们可以直接拿过来用,你都不用自己写,你只要把这个看明白就行了,所以咱们现在呢,就把这个咱们原封不动拷贝。
15:05
把这个原封不动的给它拷贝一下,来拷贝拷贝以后,那我把刚才的这个地方呢,给它替换一下,所以呢,来啊把这个呢放过来,放过来以后把这个循环呢,我拷贝一下,那我放到这边来好,然后呢,把刚才的这个我原封不动的给它替换一下,嗯,我只要替换一下就可以了啊来放到这边,放到这边以后我要改改东西了,那么首先第一个我要改的是它的这个名称,我写上咱们叫做什么呢?叫用户啊通话我们的统计啊,然后呢,纯属虚构是吧?嗯,然后下面呢,是蒸发量和降水量,那增发量我们就写上咱们叫通话次数,咱们叫通话的我们的次数,那这个就写上叫通话时长啊,咱们叫通话啊我们的时长,诶就这个意思好了,然后下面呢,你不用管了,这个呢,是我们的一月二月三月,就跟刚才一样啊,就是我们的那个月份了,这个月份咱不是能得到吗,所以原封不动拷贝就可。
16:06
可以的啊,所以把这个呢,给它去掉啊好,去掉以后我放过来啊,咱们放到这个位置,嗯,然后呢,把这个呢,给它折个行啊折个行诶好啊。行,接下来咱们再往下,下面呢是我们的value,这个value啊,一个是蒸发量,一个呢是我们的降水量,蒸发量我们说了其实就是我的通话次数啊,就是我的通话次数,所以把它放到这里啊,好放到这里以后,下面的这些值啊,我们需要变一变,所以我们拷贝,拷贝以后把这个呢,我们去掉啊,不要不要了,以后把这个呢放过来啊,放过来以后通话次数就是我们的三扣啊,咱们的三扣就是我的通话次数,还有一个是我的通话时长,通话时长呢,我们放到下面去,好放过来以后,那这个地方我同样给它来for for each的话,把这个呢我们去掉,哎,好放过来,放过来以后,那这里呢就改成叫做some。
17:05
好了,那我现在呢,基本上就已经写完了啊,写完以后我觉得呀,咱们这个数据啊,可能嗯,我想想啊,咱们可以把这个稍微的变大一些啊,变成800吧,这个变成600,嗯,好了啊,然后呢,把这个停了就可以了啊,停完了以后我们重新启动,我就希望呢,在一张图表当中,把多个维度的数据呢,给它体现出来,反正你都是统计结果嘛,我直接看一看就可以了啊。好了,那我现在呢,咱们这边呢,就可以呢,去看一看我们的结果,只要结果有了,诶我们这个数据呢就行了啊好,那我现在呢,我们就直接来吧,我现在呢就直接刷新刷新。刷新倒是有倒是有啊,但这个次数太少了是吧,然后呢,这个又太多了,就导致看的不是那么好了是吧?嗯,啊,这倒没关系吧,反正最起码是不是数据出来了啊,数据出来了,所以啊,这个时候你就记住了,你会用就行了,就意味着我们这里并没有自己写什么吧,没有自己写什么主要是看别人的什么,这个地方是怎么出来的,就意味着只要你能把这个图形你看明白,他能满足你的业务要求,你把它打开之后,重点就在于这个了。
18:22
这个你如果能搞明白的话,那这个图没有任何的问题,所以百度的这个一叉的封装的还是非常不错的啊,为什么呢,只需要改参数,别的都不用它就自动出来,还是非常好的啊。好了,这个呢,咱们就。
我来说两句