js怎么实现本地时间轴
导读：本文共2421字符，通常情况下阅读需要8分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要： 背景需求使用 D3 绘制图表一般都会绘制一个坐标轴，但是用 D3 画过图的同学都知道默许情况下绘制的坐标轴刻度是英文的。但是我们要的刻度是中文的。默认格式化：d3.time.format("%b%Y")本地格式化：zh.timeFormat("%Y年%b")实现思路思路很简单：定义简体中文本地化用本地时间格式化函数格式化数... ...
目录
(为您整理了一些要点),点击可以直达。
使用 D3 绘制图表一般都会绘制一个坐标轴，但是用 D3 画过图的同学都知道默许情况下绘制的坐标轴刻度是英文的。但是我们要的刻度是中文的。
默认格式化：
d3.time.format("%b%Y")
本地格式化：
zh.timeFormat("%Y年%b")
思路很简单：
定义简体中文本地化
用本地时间格式化函数格式化数轴的刻度值
定义新的简体中文本地化
//简体中文本地化
varzh=d3.locale({decimal:".",thousands:",",grouping:[3],currency:["￥",""],
dateTime:"%a%b%e%X%Y",
date:"%Y/%-m/%-d",time:"%H:%M:%S",periods:["上午","下午"],
days:["星期日","星期1","星期2","星期3","星期4","星期5","星期6"],
shortDays:["星期日","星期1","星期2","星期3","星期4","星期5","星期6"],
months:["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","101月","102月"],
shortMonths:["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","101月","102月"]});
定义时间比例尺
//时间比例尺vartimeScale=d3.time.scale().domain([newDate(2015,0,1),newDate(2016,1,1)]).range([0,width-40]);
指定轴的比例尺和格式化函数
//时间轴varaxis=d3.svg.axis().scale(timeScale).tickFormat(zh.timeFormat("%Y年%b"))//指定为本地格式化函数.orient("bottom")
绘制数轴
//添加时间轴varsvg=d3.select("body").append("svg").attr("width",width+200).attr("height",height).append("g").attr("class","axis").attr("transform","translate("+20+","+height/2+")").call(axis);
调剂刻度样式
//旋转文字d3.selectAll(g.ticktext).attr(transform,translate(30,20)rotate(30))
本例很简单，可使用下面的代码测试效果，你学会了吗？
完全代码
<metacharset="utf⑻">
<style>body{font-weight:bold;}
.axispath,
.axisline{fill:none;stroke:#000;shape-rendering:crispEdges;}
</style>
<body>
<scriptsrc="../../d3.js"><script>
//简体中文本地化
varzh=d3.locale({decimal:".",thousands:",",grouping:[3],currency:["￥",""],
dateTime:"%a%b%e%X%Y",date:"%Y/%-m/%-d",
time:"%H:%M:%S",
periods:["上午","下午"],
days:["星期日","星期1","星期2","星期3","星期4","星期5","星期6"],
shortDays:["星期日","星期1","星期2","星期3","星期4","星期5","星期6"],
months:["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","101月","102月"],
shortMonths:["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","101月","102月"]});
//svg宽，高
varwidth=1000,height=500;
//时间比例尺
vartimeScale=d3.time.scale().domain([newDate(2015,0,1),newDate(2016,1,1)]).range([0,width-40]);
//时间轴
varaxis=d3.svg.axis().scale(timeScale).tickFormat(zh.timeFormat("%Y年%b")).orient("bottom")
//添加时间轴
varsvg=d3.select("body").append("svg").attr("width",width+200).attr("height",height).append("g").attr("class","axis").attr("transform","translate("+20+","+height/2+")").call(axis);
//旋转文字
d3.selectAll(g.ticktext).attr(transform,translate(30,20)rotate(30))script>
js怎么实现本地时间轴的详细内容，希望对您有所帮助，信息来源于网络。