用 C3js 中的图像替换 X 轴

Question

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

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

我在 Android 上将其用作网络视图。在 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 徽标并设置了背景颜色（否则您将看不到徽标，因为它是全白和透明的）

Fiddle - http://jsfiddle.net/a2s8766c/

用 C3js 中的图像替换 X 轴

replace X axis with image in C3js

javascript

android

c3.js