search

daattali / timevis

📅 Create interactive timeline visualizations in R
http://daattali.com/shiny/timevis-demo/
Other
653 stars 157 forks source link

timeline date formate can not modify #51

Closed xwydq closed 5 years ago

xwydq commented 6 years ago

I want modify month format to Number(1-12) 

dataBasic <- data.frame(
  id = 1:4,
  content = c("Item one", "Item two" ,"Ranged item", "Item four"),
  start   = c("2016-01-10", "2016-01-11", "2016-01-20", "2016-02-14"),
  end    = c(NA, NA, "2016-02-04", NA)
)

# list style
config <- list(format = list(minorLabels = list(month = 'M')))

# json string
config <- list(
      format = "
      {
  minorLabels: {
    millisecond:'SSS',
    second:     's',
    minute:     'HH:mm',
    hour:       'HH:mm',
    weekday:    'ddd D',
    day:        'D',
    week:       'w',
    month:      'M',
    year:       'YYYY'
  },
  majorLabels: {
    millisecond:'HH:mm:ss',
    second:     'D MMMM HH:mm',
    minute:     'ddd D MMMM',
    hour:       'ddd D MMMM',
    weekday:    'MMMM YYYY',
    day:        'MM YYYY',
    week:       'M YYYY',
    month:      'YYYY',
    year:       ''
  }
}
      "
    )

timevis(dataBasic, zoomFactor = 1, options = config)
daattali commented 6 years ago

Can you show an example of how this should work in HTML without the R package? If I can see a proper working example in html+javascript I can try to see if it can be converted to work in timevis.

Here's a starter for you, a minimal html file that creates a timevis with no options. Please fill in the timeline.setOptions() call. (you'll need to change the paths of vis.min.js and vis.min.css to make sure the html page can access those)

<!DOCTYPE HTML>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis.min.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="visualization"></div>
<script type="text/javascript">
  var container = document.getElementById('visualization');
  var items = [
    {id: 1, content: 'item 1', start: '2013-04-19'}
  ]
  var timeline = new vis.Timeline(container, items, {});
  timeline.setOptions({format:{majorLabels:{month:'YY'}}})
</script>
</body>
</html>