-
Notifications
You must be signed in to change notification settings - Fork 0
/
sample_soil_column.html
156 lines (155 loc) · 6.6 KB
/
sample_soil_column.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stacked Bar Chart with Soil Types</title>
<style>
#myChart {
width: 400px; /* Set the desired width */
height: auto; /* Maintain aspect ratio */
}
</style>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="patterns.js"></script> <!-- Load the custom patterns script -->
</head>
<body>
<canvas id="myChart" width="200" height="800"></canvas>
<script>
const patternCreator = new JPPitLogPatternCreator();
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['January'], // Reduced to one label
datasets: [
{
label: '礫',
data: [12], // Adjusted to match the number of labels
backgroundColor: patternCreator.createPattern('礫'),
borderColor: 'black',
borderWidth: 1,
stack: 'SoilTypes'
},
{
label: '礫質土',
data: [10], // Adjusted to match the number of labels
backgroundColor: patternCreator.createPattern('礫質土'),
borderColor: 'black',
borderWidth: 1,
stack: 'SoilTypes'
},
{
label: '砂',
data: [3], // Adjusted to match the number of labels
backgroundColor: patternCreator.createPattern('砂'),
borderColor: 'black',
borderWidth: 1,
stack: 'SoilTypes'
},
{
label: '砂質土',
data: [12], // Adjusted to match the number of labels
backgroundColor: patternCreator.createPattern("砂質土"),
borderColor: 'black',
borderWidth: 1,
stack: 'SoilTypes'
},
{
label: 'シルト',
data: [10], // Adjusted to match the number of labels
backgroundColor: patternCreator.createPattern("シルト"),
borderColor: 'black',
borderWidth: 1,
stack: 'SoilTypes'
},
{
label: '粘性土',
data: [10], // Adjusted to match the number of labels
backgroundColor: patternCreator.createPattern("粘性土"),
borderColor: 'black',
borderWidth: 1,
stack: 'SoilTypes'
},
{
label: '有機質土',
data: [10], // Adjusted to match the number of labels
backgroundColor: patternCreator.createPattern("有機質土"),
borderColor: 'black',
borderWidth: 1,
stack: 'SoilTypes'
},
{
label: '火山灰質粘性土',
data: [10], // Adjusted to match the number of labels
backgroundColor: patternCreator.createPattern("火山灰質粘性土"),
borderColor: 'black',
borderWidth: 1,
stack: 'SoilTypes'
},
{
label: '高有機質土',
data: [10], // Adjusted to match the number of labels
backgroundColor: patternCreator.createPattern("高有機質土（腐植土）"),
borderColor: 'black',
borderWidth: 1,
stack: 'SoilTypes'
},
{
label: '砂質礫',
data: [12], // Adjusted to match the number of labels
backgroundColor: patternCreator.createPattern("砂質礫"),
borderColor: 'black',
borderWidth: 1,
stack: 'SoilTypes'
},
{
label: 'シルト質砂',
data: [12], // Adjusted to match the number of labels
backgroundColor: patternCreator.createPattern("シルト質砂"),
borderColor: 'black',
borderWidth: 1,
stack: 'SoilTypes'
},
{
label: '粘土質シルト',
data: [12], // Adjusted to match the number of labels
backgroundColor: patternCreator.createPattern("粘土質シルト"),
borderColor: 'black',
borderWidth: 1,
stack: 'SoilTypes'
},
{
label: '有機質粘性土',
data: [12], // Adjusted to match the number of labels
backgroundColor: patternCreator.createPattern("有機質粘性土", patternSize = 60),
borderColor: 'black',
borderWidth: 1,
stack: 'SoilTypes'
}
]
},
options: {
responsive: false,
plugins: {
legend: {
position: 'top',
},
title: {
display: true,
text: 'Stacked Bar Chart with Soil Types'
}
},
scales: {
x: {
stacked: true,
},
y: {
stacked: true
}
}
}
});
</script>
</body>
</html>