{
const container = html`<div></div>`;
const canvas = new G.Canvas({
container,
width,
height,
});
const group = canvas.addGroup();
const barWidth = Math.floor((width - margin.left - margin.right) / data.length) / 2;
const gap = barWidth;
const dataMax = Math.max(...data.map(datum => datum.percent));
const barHeight = (value) => {
return (height - margin.top - margin.bottom) * (value / dataMax);
}
const xScale = (i) => {
return (barWidth + gap) * i + margin.top + barWidth / 2;
}
const yScale = (value) => {
return (height - margin.top - margin.bottom) - barHeight(value) + margin.top;
}
data.forEach((datum, index) => {
group.addShape('rect', {
attrs: {
x: xScale(index),
y: yScale(datum.percent),
width: barWidth,
height: barHeight(datum.percent),
fill: 'steelblue',
}
});
group.addShape('text', {
attrs: {
x: xScale(index) + barWidth / 2,
y: yScale(datum.percent) - 5,
text: `${datum.percent}%`,
fill: '#333',
textAlign: 'center',
}
});
group.addShape('line', {
attrs: {
x1: xScale(index) + barWidth / 2,
y1: height - margin.bottom + 1,
x2: xScale(index) + barWidth / 2,
y2: height - margin.bottom + 6,
stroke: '#333',
}
});
group.addShape('text', {
attrs: {
x: xScale(index) + barWidth / 2,
y: height - margin.bottom + 20,
text: datum.browser,
fill: '#333',
textAlign: 'center',
}
});
})
const yTitle = group.addShape('text', {
attrs: {
x: 10,
y: 10,
text: 'Percentage(%)',
fill: '#333',
}
});
const xAxisLine = group.addShape('line', {
attrs: {
x1: margin.left,
y1: height - margin.bottom,
x2: width - margin.right,
y2: height - margin.bottom,
stroke: '#333',
}
});
const yLabels = [0, 10, 20, 30, 40, 50, 60];
yLabels.forEach(label => {
group.addShape('line', {
attrs: {
x1: margin.left - 5,
y1: yScale(label),
x2: margin.left - 10,
y2: yScale(label),
stroke: '#333',
}
});
group.addShape('text', {
attrs: {
x: margin.left - 12,
y: yScale(label),
text: label,
fill: '#333',
textAlign: 'right',
textBaseline: 'middle',
}
});
})
return container;
}