有没有一种方法可以设置c3.js中的x和y轴样式?

时间:2019-06-15 21:08:32

标签: javascript css vue.js c3.js

我有一张我使用c3.js库制作的图表,我想将y轴的宽度更改为更薄 https://d.pr/free/i/xSbyRB

我试图像这样直接在类中添加样式,但是没有用

.c3-axis-y path {
 stroke-width: 1px;
}

我还想像文档中提到的那样沿x轴显示网格,但是它们没有像预期的那样显示

grid: {
  x: {
    show: true
  }
}

请问我该如何解决这两个问题?

1 个答案:

答案 0 :(得分:0)

笔划为1px。我不会做得更薄(因为您将在不同的浏览器中得到混合的结果)。但是,如果通过更改笔触颜色来最小化对比度,则可以获得相同的效果:

/* axis line */
.c3 .domain {
  stroke: #eee;
}

/* gradation lines */
.c3 .c3-axis line {
  stroke: #eee;
}

/* gradation text */
.c3 .c3-axis text {
  fill: #eee;
}

...会做到的。显然,您想用颜色替换#ccc

但是,通过查看您发布的图片,您看起来就像在玩fill的{​​{1}}属性。您希望将其重置为.c3 .domainwhite

transparent
var chart = c3.generate({
    bindto: '#chart',
    data: {
      columns: [
        ['data1', 30, 200, 100, 400, 150, 250],
        ['data2', 50, 20, 10, 40, 15, 25]
      ]
    }
});
/* axis line */
.c3 .domain {
  stroke: #eee;
}

/* gradation lines */
.c3 .c3-axis line {
  stroke: #eee;
}

/* gradation text */
.c3 .c3-axis text {
  fill: #eee;
}