Question

我正在使用Sinatra进行Dashing项目，我正在仪表板上显示Graphs。我在X轴上显示Timestamps时遇到了很多麻烦，现在我有了这个工作，我还有另一个问题。在我的图表上，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')

    format =  (d) ->
      months = new Array(12)
      months[0] = "Jan"
      months[1] = "Feb"
      months[2] = "Mar"
      months[3] = "Apr"
      months[4] = "May"
      months[5] = "Jun"
      months[6] = "Jul"
      months[7] = "Aug"
      months[8] = "Sep"
      months[9] = "Oct"
      months[10] = "Nov"
      months[11] = "Dec"
      today = new Date()
      month = today.getMonth()
      day = today.getDate()
      h = today.getHours()
      m = today.getMinutes()

      if(m <= 9)
        d =  months[month] + " " + day +  " " + h + ":" + 0 + m 
      else
        d = months[month] + " " + day + " " + h + ":" + m

    x_axis = new Rickshaw.Graph.Axis.X(graph: @graph,pixelsPerTick: 100, tickFormat: format )

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

#onData is responsible for handling data sent from the jobs folder, 
#any send_event methods will trigger this function
  onData: (data) ->
    if @graph
      @graph.series[0].data = data.points
      @graph.render()
      node = $(@node)

      value = parseInt data.points[data.points.length - 1].y
      cool = parseInt node.data "cool"
      warm = parseInt node.data "warm"
      level = switch
        when value <= cool then 0
        when value >= warm then 4
        else 
          bucketSize = (warm - cool) / 3 # Total # of colours in middle
          Math.ceil (value - cool) / bucketSize

      backgroundClass = "hotness#{level}"
      lastClass = @get "lastClass"
      node.toggleClass "#{lastClass} #{backgroundClass}"
      @set "lastClass", backgroundClass

任何人都可以帮助我理解为什么我的图表不想显示任何以前的X值吗？

Answer 1

我认为您的问题是在函数today = new Date()中调用format。格式化程序正在获取Rickshaw / D3传递的日期，日期只需根据您的需要进行格式化。通过调用today = new Date()，您忽略了传入日期，而是提供您自己的/新日期。

附注：您可以查看D3's date/time formatting或moment.js以获得更简单的日期/时间格式，这样您的format功能可缩小为1或2行代码。

人力车图上的X轴不断重复

1 个答案: