Go语言视频零基础入门到精通

时间旅人

上一篇文章主要介绍了柱形图和条形图(横向柱形图)的使用方法,这里讲一下折线图、堆积图、分布图、双项比较图的使用方法
其实这些以上那些图的使用方式与柱形图的使用方式没有太大的区别,只是分布图和双向比较图需要有一些需要注意的地方

先说一下折线图 Chart.Line

1. new Chart.Line({   
2.     'item' : [   
3.         {   
4.             'text' : 'A',   
5.             'value' : [90,50,60,80,75]   
6.         },   
7.         {   
8.             'text' : 'B',   
9.             'value' : [25,33,45,98,50]   
10.         },   
11.         {   
12.             'text' : 'C',   
13.             'value' : [12,15,17,13,18]   
14.         }   
15.     ],   
16.     'legend':{'x':100, 'y':5},   
17.     'zoom' : 'follow',   
18.     'valueHalf' : true,   
19.     'linePoint':true,   
20.     'grid' : true,   
21.     'showValue' : true,   
22.     'categoryMax' : 100,   
23.     'categoryMin' : 20,   
24.     'categoryUnit' : 20,   
25.     'valueMax' : 110,   
26.     'valueMin' : 10,   
27.     'valueUnit' : 10   
28. }).render('canvas-wrapper');   
30.     new Chart.Line({
31.         'item' : [
32.             {
33.                 'text' : 'A',
34.                 'value' : [90,50,60,80,75]
35.             },
36.             {
37.                 'text' : 'B',
38.                 'value' : [25,33,45,98,50]
39.             },
40.             {
41.                 'text' : 'C',
42.                 'value' : [12,15,17,13,18]
43.             }
44.         ],
45.         'legend':{'x':100, 'y':5},
46.         'zoom' : 'follow',
47.         'valueHalf' : true,
48.         'linePoint':true,
49.         'grid' : true,
50.         'showValue' : true,
51.         'categoryMax' : 100,
52.         'categoryMin' : 20,
53.         'categoryUnit' : 20,
54.         'valueMax' : 110,
55.         'valueMin' : 10,
56.         'valueUnit' : 10
57.     }).render('canvas-wrapper');   

复制代码

legend 表示是否显示图示,它可以是boolean型或{x,y}对象类型,如果是boolean型 默认的显示位置在是{x:10,y:10}
zoom 表示放大镜的方式,有两种可以选择 一种是follow 即跟随放大,一种是select 即选择区域放大
linePoint 是折线图特有的属性,它表示折点的样式,一种是stroke即空心折点 一种是fill即实心折点
pointTip 这个也是折线图特有的属性,如果设置为true,当鼠标滑过时会跟随鼠标显示同一垂直线折点的数值
cross 是坐标图的公共属性,它表示当鼠标滑过图标时,使用十字定位鼠标的坐标,它可以是整数型,表示保留小数点后的位数,0表示只显示整数位,1表示显示到小数点后1位...


生成的图表为
http://everyjs.co.cc/demo.html#line1
  
item的value属性与柱形图是一样的,它表示的是每组比较项的数值



堆积图 Chart.Stack

1. new Chart.Stack({   
2.     'item' : [   
3.         {'text':'A','value':[10,15,20,25]},   
4.         {'text':'B','value':[12,18,22,21]},   
5.         {'text':'C','value':[30,35,37,40]}   
6.     ],   
7.     'categories':['2009','2010','2011','2012'],   
8.     'showValue':true,   
9.     'focusEvent':'mousemove',   
10.     'tip':'mousemove',   
11.     'grid':'v',   
12.     'valueAxis':'x',   
13.     'valueMax' : 100,   
14.     'valueMin' : 0,   
15.     'valueUnit' : 25   
16. }).render('canvas-wrapper');   
18.     new Chart.Stack({
19.         'item' : [
20.             {'text':'A','value':[10,15,20,25]},
21.             {'text':'B','value':[12,18,22,21]},
22.             {'text':'C','value':[30,35,37,40]}
23.         ],
24.         'categories':['2009','2010','2011','2012'],
25.         'showValue':true,
26.         'focusEvent':'mousemove',
27.         'tip':'mousemove',
28.         'grid':'v',
29.         'valueAxis':'x',
30.         'valueMax' : 100,
31.         'valueMin' : 0,
32.         'valueUnit' : 25
33.     }).render('canvas-wrapper');

复制代码

生成的图表为
http://everyjs.co.cc/demo.html#stack1
  
如果不设置valueAxis为x,生成的堆积图就是纵向的,这里就不贴代码了


分布图 Chart.Scatter

1. new Chart.Scatter({   
2.             'valueMax':140,   
3.             'valueMin':20,   
4.             'valueUnit':20,   
5.             'valueText':'体重 (kg)',   
6.             'categoryMax' : 200,   
7.             'categoryMin' : 145,   
8.             'categoryUnit' : 5,   
9.             'categoryText' : '身高 (cm)',   
10.             'padding':20,   
11.             'legend':{'x':65, 'y':20},   
12.             'focusEvent':'mousemove',   
13.             'tip':'mousemove',   
14.             'item' : [   
15.                 {'text':'女性', 'value':[   
16.                             [161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8, 53.6],   
17.                             [170.0, 59.0], [159.1, 47.6], [166.0, 69.8], [176.2, 66.8], [160.2, 75.2],   
18.                             [172.5, 55.2], [170.9, 54.2], [172.9, 62.5], [153.4, 42.0], [160.0, 50.0],   
19.                             [147.2, 49.8], [168.2, 49.2], [175.0, 73.2], [157.0, 47.8], [167.6, 68.8],   
20.                             [159.5, 50.6], [175.0, 82.5], [166.8, 57.2], [176.5, 87.8], [170.2, 72.8],   
21.                             [174.0, 54.5], [173.0, 59.8], [179.9, 67.3], [170.5, 67.8], [160.0, 47.0],   
22.                             [154.4, 46.2], [162.0, 55.0], [176.5, 83.0], [160.0, 54.4], [152.0, 45.8],   
23.                             [162.1, 53.6], [170.0, 73.2], [160.2, 52.1], [161.3, 67.9], [166.4, 56.6],   
24.                             [167.6, 58.3], [165.1, 56.2], [160.0, 50.2], [170.0, 72.9], [157.5, 59.8],   
25.                             [160.0, 55.4], [165.1, 104.1], [174.0, 55.5], [170.2, 77.3], [160.0, 80.5],   
26.                             [167.6, 64.5], [167.6, 72.3], [167.6, 61.4], [154.9, 58.2], [162.6, 81.8],   
27.                             [175.3, 63.6], [171.4, 53.4], [157.5, 54.5], [165.1, 53.6], [160.0, 60.0],   
28.                             [174.0, 73.6], [162.6, 61.4], [174.0, 55.5], [162.6, 63.6], [161.3, 60.9],   
29.                             [156.2, 60.0], [149.9, 46.8], [169.5, 57.3], [160.0, 64.1], [175.3, 63.6],   
30.                             [169.5, 67.3], [160.0, 75.5], [172.7, 68.2], [162.6, 61.4], [157.5, 76.8],   
31.                             [176.5, 71.8], [164.4, 55.5], [160.7, 48.6], [174.0, 66.4], [163.8, 67.3]]},   
32.                 {'text':'男性', 'value':[   
33.                             [174.0, 65.6], [175.3, 71.8], [193.5, 80.7], [186.5, 72.6], [187.2, 78.8],   
34.                             [181.5, 74.8], [184.0, 86.4], [184.5, 78.4], [175.0, 62.0], [184.0, 81.6],   
35.                             [180.0, 76.6], [177.8, 83.6], [192.0, 90.0], [176.0, 74.6], [174.0, 71.0],   
36.                             [184.0, 79.6], [192.7, 93.8], [171.5, 70.0], [173.0, 72.4], [176.0, 85.9],   
37.                             [176.0, 78.8], [180.5, 77.8], [172.7, 66.2], [176.0, 86.4], [173.5, 81.8],   
38.                             [178.0, 89.6], [180.3, 82.8], [180.3, 76.4], [164.5, 63.2], [173.0, 60.9],   
39.                             [183.5, 74.8], [175.5, 70.0], [188.0, 72.4], [189.2, 84.1], [172.8, 69.1],   
40.                             [170.0, 59.5], [182.0, 67.2], [170.0, 61.3], [177.8, 68.6], [184.2, 80.1],   
41.                             [186.7, 87.8], [171.4, 84.7], [172.7, 73.4], [175.3, 72.1], [180.3, 82.6],   
42.                             [167.6, 75.5], [186.7, 101.4], [175.3, 91.1], [175.3, 67.3], [175.9, 77.7],   
43.                             [175.3, 81.8], [179.1, 75.5], [181.6, 84.5], [177.8, 76.6], [182.9, 85.0],   
44.                             [177.8, 102.5], [184.2, 77.3], [179.1, 71.8], [176.5, 87.9], [188.0, 94.3],   
45.                             [174.0, 70.9], [167.6, 64.5], [170.2, 77.3], [167.6, 72.3], [188.0, 87.3],   
46.                             [174.0, 80.0], [176.5, 82.3], [180.3, 73.6], [167.6, 74.1], [188.0, 85.9],   
47.                             [180.3, 73.2], [167.6, 76.3], [183.0, 65.9], [183.0, 90.9], [179.1, 89.1],   
48.                             [170.2, 62.3], [177.8, 82.7], [179.1, 79.1], [190.5, 98.2], [177.8, 84.1],   
49.                             [180.3, 83.2], [180.3, 83.2]]}   
50.             ]   
51.         }).render('canvas-wrapper');   
53.     new Chart.Scatter({
54.                 'valueMax':140,
55.                 'valueMin':20,
56.                 'valueUnit':20,
57.                 'valueText':'体重 (kg)',
58.                 'categoryMax' : 200,
59.                 'categoryMin' : 145,
60.                 'categoryUnit' : 5,
61.                 'categoryText' : '身高 (cm)',
62.                 'padding':20,
63.                 'legend':{'x':65, 'y':20},
64.                 'focusEvent':'mousemove',
65.                 'tip':'mousemove',
66.                 'item' : [
67.                     {'text':'女性', 'value':[
68.                                 [161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8, 53.6],
69.                                 [170.0, 59.0], [159.1, 47.6], [166.0, 69.8], [176.2, 66.8], [160.2, 75.2],
70.                                 [172.5, 55.2], [170.9, 54.2], [172.9, 62.5], [153.4, 42.0], [160.0, 50.0],
71.                                 [147.2, 49.8], [168.2, 49.2], [175.0, 73.2], [157.0, 47.8], [167.6, 68.8],
72.                                 [159.5, 50.6], [175.0, 82.5], [166.8, 57.2], [176.5, 87.8], [170.2, 72.8],
73.                                 [174.0, 54.5], [173.0, 59.8], [179.9, 67.3], [170.5, 67.8], [160.0, 47.0],
74.                                 [154.4, 46.2], [162.0, 55.0], [176.5, 83.0], [160.0, 54.4], [152.0, 45.8],
75.                                 [162.1, 53.6], [170.0, 73.2], [160.2, 52.1], [161.3, 67.9], [166.4, 56.6],
76.                                 [167.6, 58.3], [165.1, 56.2], [160.0, 50.2], [170.0, 72.9], [157.5, 59.8],
77.                                 [160.0, 55.4], [165.1, 104.1], [174.0, 55.5], [170.2, 77.3], [160.0, 80.5],
78.                                 [167.6, 64.5], [167.6, 72.3], [167.6, 61.4], [154.9, 58.2], [162.6, 81.8],
79.                                 [175.3, 63.6], [171.4, 53.4], [157.5, 54.5], [165.1, 53.6], [160.0, 60.0],
80.                                 [174.0, 73.6], [162.6, 61.4], [174.0, 55.5], [162.6, 63.6], [161.3, 60.9],
81.                                 [156.2, 60.0], [149.9, 46.8], [169.5, 57.3], [160.0, 64.1], [175.3, 63.6],
82.                                 [169.5, 67.3], [160.0, 75.5], [172.7, 68.2], [162.6, 61.4], [157.5, 76.8],
83.                                 [176.5, 71.8], [164.4, 55.5], [160.7, 48.6], [174.0, 66.4], [163.8, 67.3]]},
84.                     {'text':'男性', 'value':[
85.                                 [174.0, 65.6], [175.3, 71.8], [193.5, 80.7], [186.5, 72.6], [187.2, 78.8],
86.                                 [181.5, 74.8], [184.0, 86.4], [184.5, 78.4], [175.0, 62.0], [184.0, 81.6],
87.                                 [180.0, 76.6], [177.8, 83.6], [192.0, 90.0], [176.0, 74.6], [174.0, 71.0],
88.                                 [184.0, 79.6], [192.7, 93.8], [171.5, 70.0], [173.0, 72.4], [176.0, 85.9],
89.                                 [176.0, 78.8], [180.5, 77.8], [172.7, 66.2], [176.0, 86.4], [173.5, 81.8],
90.                                 [178.0, 89.6], [180.3, 82.8], [180.3, 76.4], [164.5, 63.2], [173.0, 60.9],
91.                                 [183.5, 74.8], [175.5, 70.0], [188.0, 72.4], [189.2, 84.1], [172.8, 69.1],
92.                                 [170.0, 59.5], [182.0, 67.2], [170.0, 61.3], [177.8, 68.6], [184.2, 80.1],
93.                                 [186.7, 87.8], [171.4, 84.7], [172.7, 73.4], [175.3, 72.1], [180.3, 82.6],
94.                                 [167.6, 75.5], [186.7, 101.4], [175.3, 91.1], [175.3, 67.3], [175.9, 77.7],
95.                                 [175.3, 81.8], [179.1, 75.5], [181.6, 84.5], [177.8, 76.6], [182.9, 85.0],
96.                                 [177.8, 102.5], [184.2, 77.3], [179.1, 71.8], [176.5, 87.9], [188.0, 94.3],
97.                                 [174.0, 70.9], [167.6, 64.5], [170.2, 77.3], [167.6, 72.3], [188.0, 87.3],
98.                                 [174.0, 80.0], [176.5, 82.3], [180.3, 73.6], [167.6, 74.1], [188.0, 85.9],
99.                                 [180.3, 73.2], [167.6, 76.3], [183.0, 65.9], [183.0, 90.9], [179.1, 89.1],
100.                                 [170.2, 62.3], [177.8, 82.7], [179.1, 79.1], [190.5, 98.2], [177.8, 84.1],
101.                                 [180.3, 83.2], [180.3, 83.2]]}
102.                 ]
103.             }).render('canvas-wrapper');

复制代码

这里要注意的是item的value属性是一个只有两位的数组集合,第一位表示的是category(即x轴)的数值,第二位表示的是value(即y轴)的数值,分布图可以不需要设置valueMax valueMin categoryMax 和categoryMin

生成的图表为
http://everyjs.co.cc/demo.html#scatter1



双项比较图 Chart.Compare

这里说的双项比较图是指只用两组比较数据的条形图,可以在运动数据统计中经常见到,因为只用两组数据所以在使用它的时候一定要记住保证item集合的长度为2

1. new Chart.Compare({   
2.             'item': [{   
3.                 'text': 'Bryant',   
4.                 'value': [40, 10, 10, 5, 3]   
5.             }, {   
6.                 'text': 'James',   
7.                 'value': [42, 15, 12, 6, 4]   
8.             }],   
9.             'categories': ['Score', 'Rebounds', 'Steals', 'Assists','Third ball'],   
10.             'valueMax': 80,   
11.             'valueUnit': 20,   
12.             'padding':40,   
13.             'tip': 'mousemove',   
14.             'focusEvent': 'mousemove',   
15.             'showValue':true,   
16.             'grid':'v',   
17.             'legend': {   
18.                 'x': 50,   
19.                 'y': 20   
20.             }   
21.         }).render('canvas-wrapper');   
23.     new Chart.Compare({
24.                 'item': [{
25.                     'text': 'Bryant',
26.                     'value': [40, 10, 10, 5, 3]
27.                 }, {
28.                     'text': 'James',
29.                     'value': [42, 15, 12, 6, 4]
30.                 }],
31.                 'categories': ['Score', 'Rebounds', 'Steals', 'Assists','Third ball'],
32.                 'valueMax': 80,
33.                 'valueUnit': 20,
34.                 'padding':40,
35.                 'tip': 'mousemove',
36.                 'focusEvent': 'mousemove',
37.                 'showValue':true,
38.                 'grid':'v',
39.                 'legend': {
40.                     'x': 50,
41.                     'y': 20
42.                 }
43.             }).render('canvas-wrapper');

复制代码

生成的图表为
http://everyjs.co.cc/demo.html#compare1
  
以上就是折线图、堆积图、分布图、双项比较图的使用方法和需要注意的地方.