Skip to content

Commit 786676c

Browse files
stockiNailLeeLenaleee
stockiNail
and
LeeLenaleee
authored
Add samples of image and canvas as label content (#684)
* Add new samples to label in order to use canvas * Add samples of image and canvas as label content * trying to fix reference error to Image in vuePress * fixes reference error in VuePress using Browser API * move image creation in Utils * Update docs/samples/box/canvas.md Co-authored-by: Jacco van den Berg <[email protected]> * apply review Co-authored-by: Jacco van den Berg <[email protected]>
1 parent 5b0d906 commit 786676c

File tree

10 files changed

+591
-1
lines changed

10 files changed

+591
-1
lines changed

‎docs/.vuepress/config.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,8 @@ module.exports = {
107107
'box/basic',
108108
'box/quarters',
109109
'box/disclosure',
110+
'box/canvas',
111+
'box/image',
110112
]
111113
},
112114
{
@@ -122,6 +124,8 @@ module.exports = {
122124
'label/basic',
123125
'label/point',
124126
'label/callout',
127+
'label/canvas',
128+
'label/image',
125129
'label/lowerUpper',
126130
]
127131
},
@@ -135,6 +139,8 @@ module.exports = {
135139
'line/standardDeviation',
136140
'line/visibility',
137141
'line/labelVisibility',
142+
'line/canvas',
143+
'line/image',
138144
'line/datasetBars',
139145
'line/animation',
140146
]
@@ -164,6 +170,7 @@ module.exports = {
164170
'charts/line',
165171
],
166172
},
173+
'utils',
167174
]
168175
}
169176
}

‎docs/samples/box/canvas.md‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
# Using canvas as labels
2+
3+
```js chart-editor
4+
// <block:setup:3>
5+
const DATA_COUNT = 12;
6+
const MIN = 10;
7+
const MAX = 100;
8+
9+
const numberCfg = {count: DATA_COUNT, min: MIN, max: MAX};
10+
11+
const data = {
12+
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
13+
datasets: [{
14+
data: Utils.numbers(numberCfg)
15+
}]
16+
};
17+
// </block:setup>
18+
19+
// <block:annotation1:1>
20+
const annotation1 = {
21+
type: 'box',
22+
backgroundColor: 'rgba(165, 214, 167, 0.2)',
23+
borderWidth: 0,
24+
xMax: 2,
25+
xMin: 5,
26+
label: {
27+
enabled: true,
28+
content: Utils.getSpiral(),
29+
position: {
30+
x: 'center',
31+
y: 'start'
32+
}
33+
}
34+
};
35+
// </block:annotation1>
36+
37+
// <block:annotation2:2>
38+
const annotation2 = {
39+
type: 'box',
40+
backgroundColor: 'rgba(188, 170, 164, 0.2)',
41+
borderWidth: 0,
42+
xMax: 6,
43+
xMin: 10,
44+
label: {
45+
enabled: true,
46+
content: Utils.getHouse(),
47+
position: {
48+
x: 'center',
49+
y: 'end'
50+
}
51+
}
52+
};
53+
// </block:annotation2>
54+
55+
/* <block:config:0> */
56+
const config = {
57+
type: 'line',
58+
data,
59+
options: {
60+
scales: {
61+
y: {
62+
beginAtZero: true,
63+
}
64+
},
65+
plugins: {
66+
annotation: {
67+
annotations: {
68+
annotation1,
69+
annotation2
70+
}
71+
}
72+
}
73+
}
74+
};
75+
/* </block:config> */
76+
77+
const actions = [
78+
{
79+
name: 'Randomize',
80+
handler: function(chart) {
81+
chart.data.datasets.forEach(function(dataset, i) {
82+
dataset.data = dataset.data.map(() => Utils.rand(MIN, MAX));
83+
});
84+
chart.update();
85+
}
86+
}
87+
];
88+
89+
module.exports = {
90+
actions: actions,
91+
config: config
92+
};
93+
```

‎docs/samples/box/image.md‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
# Using images as labels
2+
3+
```js chart-editor
4+
// <block:setup:2>
5+
const DATA_COUNT = 12;
6+
const MIN = 10;
7+
const MAX = 100;
8+
9+
const numberCfg = {count: DATA_COUNT, min: MIN, max: MAX};
10+
11+
const data = {
12+
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
13+
datasets: [{
14+
data: Utils.numbers(numberCfg)
15+
}]
16+
};
17+
// </block:setup>
18+
19+
// <block:annotation:1>
20+
const annotation = {
21+
type: 'box',
22+
backgroundColor: 'rgba(0, 0, 0, 0.2)',
23+
borderWidth: 1,
24+
borderColor: '#F27173',
25+
yMin: 30,
26+
yMax: 80,
27+
xMax: 2,
28+
xMin: 5,
29+
label: {
30+
enabled: true,
31+
content: Utils.getImage(),
32+
width: 150,
33+
height: 150,
34+
position: 'center'
35+
}
36+
};
37+
// </block:annotation>
38+
39+
/* <block:config:0> */
40+
const config = {
41+
type: 'line',
42+
data,
43+
options: {
44+
scales: {
45+
y: {
46+
beginAtZero: true
47+
}
48+
},
49+
plugins: {
50+
annotation: {
51+
annotations: {
52+
annotation
53+
}
54+
}
55+
}
56+
}
57+
};
58+
/* </block:config> */
59+
60+
const actions = [
61+
{
62+
name: 'Randomize',
63+
handler: function(chart) {
64+
chart.data.datasets.forEach(function(dataset, i) {
65+
dataset.data = dataset.data.map(() => Utils.rand(MIN, MAX));
66+
});
67+
chart.update();
68+
}
69+
}
70+
];
71+
72+
module.exports = {
73+
actions: actions,
74+
config: config
75+
};
76+
```

‎docs/samples/label/canvas.md‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
# Using canvas as content
2+
3+
```js chart-editor
4+
// <block:setup:3>
5+
const DATA_COUNT = 12;
6+
const MIN = 0;
7+
const MAX = 100;
8+
9+
const numberCfg = {count: DATA_COUNT, min: MIN, max: MAX};
10+
11+
const data = {
12+
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
13+
datasets: [{
14+
data: Utils.numbers(numberCfg)
15+
}]
16+
};
17+
// </block:setup>
18+
19+
// <block:annotation1:1>
20+
const annotation1 = {
21+
type: 'label',
22+
content: Utils.getHouse(),
23+
xValue: 9,
24+
yValue: 30
25+
};
26+
// </block:annotation1>
27+
28+
// <block:annotation2:2>
29+
const annotation2 = {
30+
type: 'label',
31+
content: Utils.getSpiral(),
32+
xValue: 2,
33+
yValue: 50
34+
};
35+
// </block:annotation2>
36+
37+
/* <block:config:0> */
38+
const config = {
39+
type: 'line',
40+
data,
41+
options: {
42+
scales: {
43+
y: {
44+
beginAtZero: true,
45+
}
46+
},
47+
plugins: {
48+
annotation: {
49+
annotations: {
50+
annotation1,
51+
annotation2
52+
}
53+
}
54+
}
55+
}
56+
};
57+
/* </block:config> */
58+
59+
const actions = [
60+
{
61+
name: 'Randomize',
62+
handler: function(chart) {
63+
chart.data.datasets.forEach(function(dataset, i) {
64+
dataset.data = dataset.data.map(() => Utils.rand(MIN, MAX));
65+
});
66+
chart.update();
67+
}
68+
}
69+
];
70+
71+
module.exports = {
72+
actions: actions,
73+
config: config
74+
};
75+
```

‎docs/samples/label/image.md‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
# Using images as content
2+
3+
```js chart-editor
4+
// <block:setup:3>
5+
const DATA_COUNT = 12;
6+
const MIN = 0;
7+
const MAX = 100;
8+
9+
const numberCfg = {count: DATA_COUNT, min: MIN, max: MAX};
10+
11+
const data = {
12+
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
13+
datasets: [{
14+
data: Utils.numbers(numberCfg)
15+
}]
16+
};
17+
// </block:setup>
18+
19+
// <block:annotation1:1>
20+
const annotation1 = {
21+
type: 'label',
22+
drawTime: 'afterDraw',
23+
content: Utils.getImage(),
24+
width: 100,
25+
height: 100,
26+
xValue: 4,
27+
yValue: 30,
28+
xAdjust: 150,
29+
yAdjust: -150,
30+
borderWidth: 1,
31+
borderDash: [6, 6],
32+
callout: {
33+
enabled: true,
34+
position: 'left'
35+
}
36+
};
37+
// </block:annotation1>
38+
39+
// <block:annotation2:2>
40+
const annotation2 = {
41+
type: 'point',
42+
drawTime: 'afterDraw',
43+
xValue: 4,
44+
yValue: 30,
45+
radius: 10
46+
};
47+
// </block:annotation2>
48+
49+
/* <block:config:0> */
50+
const config = {
51+
type: 'line',
52+
data,
53+
options: {
54+
scales: {
55+
y: {
56+
beginAtZero: true,
57+
}
58+
},
59+
plugins: {
60+
annotation: {
61+
annotations: {
62+
annotation1,
63+
annotation2
64+
}
65+
}
66+
}
67+
}
68+
};
69+
/* </block:config> */
70+
71+
const actions = [
72+
{
73+
name: 'Randomize',
74+
handler: function(chart) {
75+
chart.data.datasets.forEach(function(dataset, i) {
76+
dataset.data = dataset.data.map(() => Utils.rand(MIN, MAX));
77+
});
78+
chart.update();
79+
}
80+
}
81+
];
82+
83+
module.exports = {
84+
actions: actions,
85+
config: config
86+
};
87+
```

‎docs/samples/line/basic.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,6 @@ const actions = [
8888

8989
module.exports = {
9090
actions: actions,
91-
config: config,
91+
config: config
9292
};
9393
```

0 commit comments

Comments
 (0)