博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
d3.js v4日期坐标轴转换为中文格式
阅读量:7219 次
发布时间:2019-06-29

本文共 1400 字,大约阅读时间需要 4 分钟。

TimeFormat

1.time类型坐标轴的定义域

  1. d3.scaleTime().domain([min,max])minmax是代表定义域范围,在scaleTime中,min的格式只接受标准时间格式;这里就需要将'2012-2-2'或者'2012/2/2'等时间格式转化为标准格式。

  2. d3.timeParse():一定要注意m,d代表的意思,以及大小写。

    let parseTime = d3.timeParse('%Y%m/%d')   console.log(parseTime('2012/2/2'))    //Thu Feb 02 2012 00:00:00 GMT+0800 (中国标准时间)

2.坐标轴Label的显示问题

  1. d3默认支持的是英文日期;

  2. d3.timeFormatLocale()

    let locale = d3.timeFormatLocale({  dateTime: "%a %b %e %X %Y",  date: "%Y/%-m/%-d",  time: "%H:%M:%S",  periods: ["上午", "下午"],  days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],  shortDays: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],  months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],  shortMonths: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"]});//自己构建一套显示格式,注意月份和星期都有全称和缩写,这有就是前文中%d和%D的区别。 .tickFormat(locale.format("%Y年%b月")));//格式化时间,显示如下图所示

clipboard.png

3.对data数据的格式化处理

  1. 通常数据中时间的格式为2012/2/2,或是2012-2-2等,导入到d3中无法识别,此时需要将此时间转化为标准时间。

  2. 还是利用d3.timeParse(""),将data里面的日期数据转化为标准日期数据。

    let data=[       {day:'02-11-2016',count:180},       {day:'02-12-2016',count:250},       {day:'02-13-2016',count:150},       {day:'02-14-2016',count:496},       {day:'02-15-2016',count:140},       {day:'02-16-2016',count:380},       {day:'02-17-2016',count:100},       {day:'02-18-2016',count:150}   ];   let parseDate = d3.timeParse("%m-%d-%Y"); data.forEach(d=>{    d.date = parseDate(d.day);}); …………

    参考:

转载地址:http://toxym.baihongyu.com/

你可能感兴趣的文章
iphone-common-codes-ccteam源代码 CCFile.m
查看>>
python:浅析python 中__name__ = '__main__' 的作用
查看>>
修改tomcat端口后不能IP访问问题
查看>>
review board
查看>>
URAL 1495 One-two, One-two 2
查看>>
牛客国庆集训派对Day3 G Stones
查看>>
虚函数简单总结
查看>>
插入排序--算法导论
查看>>
NoSQL -- Redis使用
查看>>
处理iphone的 .play() 不能播放问题
查看>>
jetty404web界面服务器信息隐藏
查看>>
22个Photoshop网页设计教程网站推荐
查看>>
如何让程序员更容易的开发Web界面?重构SmartAdmin展示TinyUI
查看>>
centos7 python2和python3共存
查看>>
rhel6.2配置在线yum源
查看>>
分级聚类算法
查看>>
Web Services 入门(之二)
查看>>
随机模拟MCMC和Gibbs Sampling
查看>>
网络安全是一种态度
查看>>
POJ1131 Octal Fractions
查看>>