Open lovelyJason opened 1 year ago
Describe the bug svg元素和他的父元素宽度是一致,设置flex或者margin: 0 auto都没办法水平居中; Screenshot
flex
margin: 0 auto
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.
Describe the bug svg元素和他的父元素宽度是一致,设置
flex
或者margin: 0 auto
都没办法水平居中; ScreenshotHow to reproduce
Additional context Add any other context about the problem here.