【问题标题】:Not able to display Month names on Rickshaw Graph on Coffeescript无法在 Coffeescript 上的 Rickshaw Graph 上显示月份名称
【发布时间】:2014-02-13 21:33:53
【问题描述】:

我正在使用一个名为 Dashing 的基于 Sinatra 的框架进行项目。我的项目的一部分是使用 RickShaw Graph 创建一个图表。我的问题是我无法在 X 轴上显示月份名称和日期。我正在使用咖啡脚本来呈现这些值。这是图表的代码:

class Dashing.Graph extends Dashing.Widget



@accessor 'points', Dashing.AnimatedValue

  @accessor 'current', ->
    return @get('displayedValue') if @get('displayedValue')
    points = @get('points')
    if points
      points[points.length - 1].y

#ready is triggered when ever the page is loaded.
  ready: ->
    container = $(@node).parent()
    # Gross hacks. Let's fix this.
    width = (Dashing.widget_base_dimensions[0] * container.data("sizex")) + Dashing.widget_margins[0] * 2 * (container.data("sizex") - 1)
    height = (Dashing.widget_base_dimensions[1] * container.data("sizey"))
    @graph = new Rickshaw.Graph(
      element: @node
      width: width
      height: height
      renderer: @get("graphtype")
      series: [
        {
        color: "#fff",
        data: [{x:0, y:0}]
        }
      ]
    )

    @graph.series[0].data = @get('points') if @get('points')
    time = new Rickshaw.Fixtures.Time()
    days = time.unit("day")

    x_axis = new Rickshaw.Graph.Axis.Time(
      graph: @graph
      timeUnit: days
    )
    y_axis = new Rickshaw.Graph.Axis.Y(graph: @graph, tickFormat: Rickshaw.Fixtures.Number.formatKMBT)
    @graph.render()

根据我对 Rickshaw Graph API 的理解:

https://github.com/shutterstock/rickshaw/blob/master/src/js/Rickshaw.Fixtures.Time.js

它说您可以指定单位名称。因此,对于这种情况,我只是出于测试原因使用“day”,但这似乎不起作用。 任何帮助都会很棒。

【问题讨论】:

    标签: javascript coffeescript sinatra rickshaw dashing


    【解决方案1】:

    您可以指定一个 timeFixture 来驱动如何标记 x 轴上的刻度。

    var xAxis = new Rickshaw.Graph.Axis.Time( {
      graph: graph,
      timeFixture: new Rickshaw.Fixtures.Time.Local()
    } );
    

    fixture 负责显示的时间范围,并触发日期/时间格式的适当详细程度,例如从几年放大到几小时。

    您也可以创建自己的“时间装置”并将其设置在那里,看看 Rickshaw.Fixtures.Time 或 Rickshaw.Fixtures.Time.Local

    或者,指定固定间距,也就是您始终想要显示的“单位”:

    var timeFixture = new Rickshaw.Fixtures.Time();
    var unitHour = timeFixture.unit('hour');
    var xAxis = new Rickshaw.Graph.Axis.Time( {
      graph: graph,
      timeUnit: unitHour,
      timeFixture: timeFixture
    } );
    

    【讨论】:

    猜你喜欢
    • 2015-01-19
    • 2019-11-20
    • 1970-01-01
    • 2014-02-24
    • 1970-01-01
    • 2023-03-20
    • 2021-07-29
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多