Question

我正在使用c3.js来制作图表。问题是我无法改变xgrid上文本元素的位置。我希望他们是横向的。但是，当我尝试使用旋转时，元素会超出svg。我怎样才能准确地放置它们的位置，但要使它们水平

js fiddle：http://jsfiddle.net/yrzxj3x2/7/

这里是我试过的完整代码的CSS，请参阅js fiddle

.xLineLable text{
  font-size: 12px;
}
.c3-grid text {
    fill: #000;
    transform: rotate(0);
  }

Answer 1

您可以通过添加以下css来水平旋转文本。

.c3-grid text {
    fill: #000;
    transform:rotate(0deg) translate(266px, 0px);
  }

如果要添加更多行，则应手动增加值。

您也可以提供以下职位：

 x: {
    lines: [
      {value: "2016-01-08", text: "Want to rorate this text in 180 degrees",
      class: "xLineLable", position: "outer-middle"}


    ]

<强> Working Fiddle

修改

如果您想要水平线，那么为什么不添加到ygrid。

grid: { y: { lines: [ {value: 50,text: "Want to rorate this text in 180 degrees", class: "xLineLable", position: "middle"}, ] },

<强> Fiddle

Answer 2

所以小提琴中的文字说要旋转180度......

我在这做了：

transform: translate(90px, 230px) rotate(90deg) !important;

我也像你想要的那样横向移动并将其移动到一个可读的地方：

 transform: translate(295px, 115px);

如果需要，您可以移动x和y坐标以将其重新设置为更高。它看起来像使用位置的网格元素。不确定代码是什么样的。

如何使用css

2 个答案: