Question

我正在使用C3.js图表库来绘制我的数据。

我需要以时尚的格式显示数据。要求就像，我必须用平山上的图像替换图的X轴。所以基本上我想要隐藏默认的X轴并用图像替换它。我没有找到任何方法来做到这一点。

我在Android上使用它作为webview。在Android或Javascript中是否有任何技巧？

Answer 1

您可以使用CSS隐藏x轴元素。要放置图像，容器的样式会更容易（SVG元素的样式也可以 - 您可以使用图案或过滤器，但容器样式更容易）

例如

#chart  {
    background: url('img/hills.png') bottom 40px center no-repeat;
    background-size: 100% 20px;
}

#chart .c3-axis-x path,
#chart .c3-axis-x line {
    display: none;
}

其中chart是图表容器元素的ID。

这是一个示例。我已将图像设置为JSFiddle徽标并设置背景颜色（否则您将看不到徽标，因为它全部为白色和透明度）

小提琴 - http://jsfiddle.net/a2s8766c/

用C3js中的图像替换X轴

1 个答案: