chart.xkcd
chart.xkcd copied to clipboard
生成的图没办法水平居中啊
Describe the bug
svg元素和他的父元素宽度是一致,设置flex
或者margin: 0 auto
都没办法水平居中;
Screenshot
![image](https://user-images.githubusercontent.com/50656459/235625853-c0689435-2f34-46f6-b1d0-df2a11516638.png)
How to reproduce
<div class="posts-chart" style="width: 800px;">
<svg class="line-chart"></svg>
</div>
const svg = document.querySelector('.posts-chart .line-chart');
// chartXkcd.Line 创建一个折线图
const lineChart = new chartXkcd.Line(svg, {
//图表的标题
title: '文章归档统计图',
// 图表的 x 标签
xLabel: '日期',
// 图表的 y 标签
yLabel: '文章篇数',
// 需要可视化的数据
data: {
// x 轴数据
labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
// y 轴数据
datasets: [{
// 第二组数据
label: '篇数',
data: [0, 1, 30, 70, 80, 100, 50, 80, 40, 150],
}],
},
// 可选配置以自定义图表的外观
options: {
// 自定义要在 y 轴上看到的刻度号(默认为 3)
yTickCount: 3,
// 指定要放置图例的位置
legendPosition: chartXkcd.config.positionType.upLeft
}
});
Additional context Add any other context about the problem here.