00:00
哈喽,各位小伙伴们大家好,那接下来啊,咱们呢,去讲一些关于E叉坐标系这样的一个知识点。那首先说啊,咱们呢,对于E叉啊已经有一个认知了,对于它的使用呢,应该也不成问题了。那所以说啊,接下来呢,咱们呢,再去讲一个新的知识点,叫做坐标系。那首先说啊,E叉图表当中它的坐标系啊,有三种,第一种呢,就是一个坐标体系,比如说有一个X轴,有一个Y轴。当然这个图片当中所举的例子啊,它呢是由散点图去完成的。所以说这也就是咱们前面所学的一个坐标体系,带有X和Y的这样的坐标系。当然啊,除此之外呢,还有双坐标系,什么是双坐标系呢?咱们的可以看一下子,比如说啊,它的轴X轴有一个,但是Y轴有几个呢?Y轴有两个。
01:04
对吧,那所以说呢,这个呢,也就是所谓的双坐标系。那以及呢,还有什么呢,这个呢也是双坐标系,以及呢,还有什么呢,就是多坐标系。什么叫多坐标系呢?就是X轴有多个,Y轴有多个,当然啊,这种情况出现的概率很小,所以说多坐标系呢,咱们呢,可以看一下旁边的代码。比如说X轴你有几个呢?有两个那你就写两个,如果有三个,那咱就写三个,当然这种多坐标系它不常用,所以说呢,咱们要去讲解一下子这种一个坐标体系和双坐标系。那所以说啊,咱们呢,去新建一个呃,案例这个呢,咱们叫做零六吧。那这个呢,咱们呢,起个名字叫做E叉坐标系。指几个坐标系呢?哎,一个坐标系。
02:04
那咱们呢,在前面的课程当中啊,经常呢,以柱状图,饼图啊,还有折线图举例子,那咱们这里呢,就给它换成什么呀,这回咱们就给它换成散点图。对吧,好了,那咱们呢,当然啊,基本的结构啊,你还是得有的,那所以说啊老师呢,就不再写了,直接给它拎过来。对吧,但是啊,这里面的这个set options这个话呢,咱自己呢,重新写一下。对吧,也就是说最重要的地方,那咱们呢,自己呢,再重写一下。那这里啊,咱们所讲的呢,是一个坐标系,而且呢,咱们要讲的是什么图呢,是散点图。那咱就来呗。那首先说my char属于ears的实例,S op option传入呢,相应的配置对象,那咱一个一个来。
03:00
那首先说啊,咱们呢,给他来一个标题,哎,标题那就是抬头。那它的文本呢?咱给它起个名吧,就叫做一个坐标系。对吧,那咱们呢,可以保存一下,哎,可以保存啊,以及回到咱们的浏览器当中稍微观看一下,哎,这是不成问题的对吧,以及咱们这个容器呢,是这个咱给他来个100%吧,哎,100%宽对吧,高度是400。那以及咱们接下来接着来。那首先说啊,咱们是有一个坐标体系,也就是说有一个X轴,有一个Y轴对吧,那咱来那一个是什么呀?X轴,那当然不应该是在这儿对吧,这个呢是X轴。那你说xa叉is有一个X轴,以及呢,还有一个是Y轴Y叉。对吧,那当然啊,咱们呢,现在呢是没有写数据的,所以说你是看不见数据的,但是呢,拥有着X轴和Y轴。
04:06
对吧,那接下来呢,咱们呢,要展示的是一个什么呀,展示的是一个散点图,那散点图要注意它是属于哪个系列呢?叫做scatter。那以及散点图它所需要的数据啊,是一个二维数组,这里要注意,那么二维数组当中的这个是X和Y代表的是一个点,对吧?XY代表的是一个点。那所以说啊,咱们呢,给它来一个系列。对吧,那这个呢,应该是咱们的散点图。那也就是说啊,咱们的系列ER isc,咱给它来一个数组对吧,那这里面呢,咱们先说第一个类型是什么?是散点图,叫做SSCT。对吧,这是散点图的这样的一个类型,那以及呢,这里呢,要注意一件事,它的数据date是二维数组。那所以说这是咱们散点图的一个啥呀,数据date data对吧,那来一个数组,那数组里面套数组,比如说老师来一些数据十二十。
05:11
对吧,再来一个,比如说13,再来一个66。那以及咱们再来一个,比如说啊,再来一个五十来一个九。对吧,再来比如说来一个44,来一个22,那以及咱们再来一个点,比如说15,再来一个九啊,或者来一个十吧,对吧,当然这些数据呢,老师呢,都是随便写的。那咱们呢,回首呢,去看一下咱们的散点图,是不是就有了。对吧,分别看一下第一个点是十和20,对吧?哎,这是X是十,Y是20,这是没问题的吧。对吧,但是这里呢,要注意一件事,你会发现咱们这个点与点之间的这个距离啊,很不平衡,有的很近哎,有的很远,那老师呢,想让他们均匀一些,就这个点与点之间距离均匀一些,这玩意怎么整,可以这么整啊,就是X轴这。
06:05
给它加一个type的属性,属性值为什么呢?为category cat对不?那咱们呢,可以看一下老师加上了这个属性之后,你会发现,哎,这个点与点之间的这个距离好像,哎,有点这个合理化。对不啊,那所以说啊,呃,当然在人家的文档当中也是有的。这样老师呢,也给你们看一下一对不进人家的官网,咱们呢也稍微看一下子配置项,咱们刚刚看到的是用了一个谁是X轴当中有一个type的属相,那咱们呢可以瞄眼啊,就是这个type的属相,咱们找一下T开头的。对吧,OPQRST啊,看一下子有没有。应该是有的,但是他这个值有点多。对不这不这呢嘛,对吧,Tab为category类木轴,适用于离散的类目数据,对不这因为咱们正好是散点图嘛,所以说呢,它呢可以让咱们的坐标体系呢,看着更加怎么呢?哎,就是这个距离感看着更加好一些。
07:15
对不?你也可以看一下,加与不加还是有区别的。对不就是加上与不加上它还是有区别的,那你加上之后你会发现,诶,它这个距离观看什么呢?看着还还挺舒服的。对吧,所以说这是咱们当年所学的什么呀,一个坐标体系,当然也可以有多个坐标体系,那咱们来一个,这是零几呢,看一下应该是0707。这个叫什么呢?叫做多个。坐标体系。对吧,哎,那咱来一个当然啊,这个老师呢,也就不再从头去写了,咱呢把它给它拿过来。对吧,把零六直接给他拷贝过来,咱稍微改改。
08:00
对,不但option这那咱们呢,还是自己重新写一下。对吧,那这块呢,老师呢,给他干掉一下,这块给他干掉一下。对吧,那这回呢,老师呢,想来一个什么呢,就是双坐标系,哎,双。坐标系,什么是双坐标系呢?就是X轴有几个呢?有一个,Y轴呢有两个,而且呢,老师呢,想来一个呃,柱状图和一个折线图可以吧,所以说my char.set option op对吧?传咱们相应的配置对象。那咱们呢,也是来一个title。那么文本的咱给他来个名吧,比如说咱们就叫做双坐标对吧,哎,双坐标。那这里啊,咱们呢,得有相应的X轴XAXX轴呢,老师呢,给他来点数据吧,Date哎,比如说呃,咱们就叫做游戏。
09:00
对吧,那再给他来一个,比如说这个呢,咱们给他管它叫做直播。对吧,啊,比如说经济啊,比如说啊,不是经理是经济。哎,经济,比如说呢,咱们再给他来一个吧,再来一个,呃,娱乐吧,哎娱乐。那这是X轴以及呢,有相应的Y轴,那咱来个Y对吧,Y轴那以及啊有咱们的系列。系列呢,有两个刚刚老师也说了,咱呢需要一个柱状图,再来一个什么呢,再来一个折线图,那再来一个第一个T,虽然说折线图呢,应该是拉。给他呢来一些数据,比如说啊,咱给他来个十二十三十和40。对不,那当然还有一个就是什么呢?是咱们的柱状图,那柱状图呢,老师呢,也给他来一个,那复制一份对吧,那这块呢,给他改成大就行了。那咱们呢,保存一下子回到咱们的程序当中去瞄眼,你看一下现在是不是在一个容器当中拥有着,是不是拥有着两个。
10:09
啊,两个图形,一个是柱状图,一个是折线图。对不?当然啊,那首先说咱要的是双坐标系,什么叫双坐标系呢?左面有一个Y轴,右面再给他来一个Y轴。对不,那那咱们呢,先一点来啊,那首先说它应该有两个Y轴,那么所以说啊,你y X is y轴的设置,你就不能写一个对象了,你看这个Y轴呢,它呢还可以写成什么呢?写成数组的形式。对吧,也就是说你有两个Y轴,OK,那你得来来来个数组,数组里面呢有两个Y轴,那咱们看一下子是不是有两个Y轴,那咱们刷新看一下。当然啊,这里呢,要注意一件事儿,咱们的这个线呢,目前还看不出来。那所以说咱们呢,把咱们Y轴这个线呢,给它展示出来,以及刻度咱们也给它弄出来。
11:05
对吧,这个我记得咱们在前面是走过的,咱们找一下子,找一下子对吧,显示轴和刻度,那咱们呢,也给他拿过来找到咱们的这儿。对吧,那当然这里呢,老师呢,给他加一个。对吧,那这咱也给他加一个。对吧,那咱们呢,给它呃呃格式化一下,稍微好看一下子啊,咱们先看有没有线和那个刻度。对吧,是不是就有了对吧,但是你要注意一件事什么事,虽然现在是有两个Y轴,但是这两个Y轴啊,它不对啊,你看一个是有数字的,一个是没数字。对吧,当然这咱这个数据也可以调调啊,这个老师给他来个六啊,这个是12啊十这个来个99,这个咱给他来个20吧,咱们先看下数据。对吧,那首先说你看啊,现在它的这个Y轴1000~100,你看零到100是不是很像它的,因为它最高是90嘛,对吧,那所以说咱想来两个Y轴,比如说一个Y轴呢,只是展示的是谁,展示的是这个柱状图数据。
12:13
对吧,另外一个Y轴呢,展示的是谁呢?是这个折线图的数据,那这怎么搞呢?那这里呢,要注意一件事,咱们呢需要指定哪个图表用哪一个轴。用到谁呢?用到的一个属性啊,叫做什么呢?叫做yr is index就是它。这个老师写一下呢,你看啊,再给他来一个叫做Y叉。啊,A叉index等于几等于零,那它代表的是什么呢?代表的折线用的是第一个Y轴。比如说折线呢,它用的是左边这个第一个Y轴。对不?那以及单词千万千万别写错了,咱们看一下单词有没有错。叫做喵眼啊,叫做y X index y对吧,叉s index应该是没问题的对吧,那以及给他也来一个,那你看啊,咱们瞄眼啊,当然这是一。
13:11
啊一当然这得有个逗号,那所以说咱们看一下子是不是指定了两个Y轴。对不,而且一个轴你看啊,你这块一定要给我看懂,首先说折线图,折线图看的是哪个,Y轴看的是右侧的这个。对不,你看比如说老师改个值改个88 80你看嘛。对吧,右侧的这个是折线图的Y轴,而你这个是谁呢?这个呃,零到40是谁是柱状图的Y轴。对吧,而这行代码是什么,说白了就告诉人家,人家用哪一个轴。对吧,所以说你看那这个烂用的是什么,用的是用的是索引值为一的呃,Y轴。对吧,因为总共就俩嘛,零和一嘛,Y轴。
14:02
对吧,那咱这个把用的啥,用的是索引值。用的是索引值为一的啊Y轴。哇,这这应该是零对吧,这应该是零的Y轴,这个是一的Y轴。对吧,告诉人家用哪个轴,哎轴当然这两个值你可以改啊,比如说它用一,它用零那也可以对吧,那咱们的回首呢,再看一下子走,你看左右是不是就调过来了。对吧,所以说呢,一定要注意在一个坐标体系当中啊,它可以拥有啊双轴啊双坐标系,比如说一个X2个Y。对吧,当然刚刚老师也说了,一个坐标体系当中呢,也可以有多坐标系,就是有多个X轴,多个Y轴,当然就是X轴或者Y轴,这多写几个就行了。对吧,那所以说这是咱们的一个多,呃,双坐标体系的一个学习。
我来说两句