C3.js 定位和调整大小答案

【问题标题】：C3.js positioning and resizingC3.js 定位和调整大小
【发布时间】：2015-09-17 06:25:00
【问题描述】：

我正在使用 C3.js 来可视化数据，但我不明白图表的定位和大小是如何工作的。

当我添加/初始化图表时，所有其他元素都会移动。换句话说：不可能在图表的水平面上放置任何元素。在将图表添加到页面之前，这不是问题。

我的 HTML 代码如下所示：

<div id = "ChartContainer">

</div>

我的 Javascript 代码如下所示：

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 50, 20, 10, 40, 15, 25]
        ]
    }
});

我的 CSS 代码如下所示：

#ChartContainer {
height: 50%; width: 75%;
top: 0%; left: 25%;
position: absolute;
}

#otherElement {
  height: 0%; width: 0%;
  top: 0%; left: 0%;
  background-color: blue;
  position: absolute;
}

【问题讨论】：

您没有提供您要求我们查看的任何其他元素（在 html 中）。把它放到小提琴中怎么样，这样我们就可以看到你遇到了什么问题？

标签： javascript html css d3.js c3

【解决方案1】：

使用 c3.js 从其api 提供的宽度和高度属性

【讨论】：