This repository was archived by the owner on Nov 25, 2021. It is now read-only.
File tree Expand file tree Collapse file tree 1 file changed +95
-0
lines changed Expand file tree Collapse file tree 1 file changed +95
-0
lines changed Original file line number Diff line number Diff line change
1
+ <!doctype html>
2
+ < html >
3
+
4
+ < head >
5
+ < title > Hierarchical Bar Chart</ title >
6
+ < script src ="../node_modules/chart.js/dist/Chart.bundle.js "> </ script >
7
+ < script src ="../build/Chart.Hierarchical.js " type ="text/javascript "> </ script >
8
+ < style >
9
+ canvas {
10
+ -moz-user-select : none;
11
+ -webkit-user-select : none;
12
+ -ms-user-select : none;
13
+ }
14
+
15
+ </ style >
16
+ </ head >
17
+
18
+ < body >
19
+ < div id ="container " style ="width: 75%; ">
20
+ < canvas id ="canvas "> </ canvas >
21
+ </ div >
22
+ < script >
23
+ const data = {
24
+ // define label tree
25
+ labels : [
26
+ 'A' ,
27
+ {
28
+ label : 'C1' ,
29
+ expand : true ,
30
+ children : [ 'C1.1' , 'C1.2' , 'C1.3' ,
31
+ {
32
+ label : 'C1.4' ,
33
+ expand : true ,
34
+ children : [ 'C1.4.1' , 'C1.4.2' , 'C1.4.3' ]
35
+ } ]
36
+ }
37
+ ] ,
38
+ datasets : [ {
39
+ label : 'Test' ,
40
+ // store as the tree attribute for reference, the data attribute will be automatically managed
41
+ tree : [
42
+ 1 ,
43
+ {
44
+ value : 6 ,
45
+ children : [ 7 , 8 , 9 , {
46
+ value : 10 ,
47
+ children : [ 11 , 12 , 13 ]
48
+ } ]
49
+ }
50
+ ]
51
+ } ]
52
+ } ;
53
+ window . onload = ( ) => {
54
+ const ctx = document . getElementById ( "canvas" ) . getContext ( "2d" ) ;
55
+ window . myBar = new Chart ( ctx , {
56
+ type : 'bar' ,
57
+ data : data ,
58
+ options : {
59
+ responsive : true ,
60
+ title : {
61
+ display : true ,
62
+ text : 'Chart.js Hierarchical Bar Chart'
63
+ } ,
64
+ layout : {
65
+ padding : {
66
+ // add more space at the bottom for the hierarchy
67
+ bottom : 60
68
+ }
69
+ } ,
70
+ scales : {
71
+ xAxes : [ {
72
+ type : 'hierarchical' ,
73
+ // offset setings, for centering the categorical axis in the bar chart case
74
+ offset : true ,
75
+
76
+ // grid line settings
77
+ gridLines : {
78
+ offsetGridLines : true
79
+ }
80
+ } ] ,
81
+ yAxes : [ {
82
+ ticks : {
83
+ beginAtZero : true
84
+ }
85
+ } ]
86
+ }
87
+ }
88
+ } ) ;
89
+
90
+ } ;
91
+
92
+ </ script >
93
+ </ body >
94
+
95
+ </ html >
You can’t perform that action at this time.
0 commit comments