人力车图形旋转-90度

时间:2013-11-27 04:26:38

标签: javascript d3.js coffeescript rickshaw dashing

我正在为仪表板项目尝试Dashing框架,我正在尝试使用rickshaw.js为仪表板绘制图形。我已经定制了标签,所以它们正是我想要的,但遗憾的是文本似乎堆叠在一起。我一直在尝试使用tickTransformation,就像我发现here一样,但它似乎不起作用。这是我现在拥有的(注意这是coffeescript,而不是javascript。

@graph = new Rickshaw.Graph(
element: @node
width: width
height: height
renderer: @get("graphtype")
series: [
  {
  color: "#fff",
  data: [{x:0, y:0}]
  }
]
  )
x_axis = new Rickshaw.Graph.Axis.X(
  graph: @graph
  tickFormat: Rickshaw.Fixtures.Number.myXFormat
  tickTransform: (svg) ->
    svg.style("text-anchor", "start")
    .attr("transform", "rotate(-90)")
)
y_axis = new Rickshaw.Graph.Axis.Y(
  graph: @graph
  tickFormat: Rickshaw.Fixtures.Number.myYFormat
  tickTransform: (svg) ->
    svg.style("text-anchor", "start")
      .attr("transform", "rotate(-90)")
@graph.render()

它最终看起来像这样:

enter image description here

1 个答案:

答案 0 :(得分:0)

我认为您希望使用tickTransformation代替tickTransform