js怎么实现本地时间轴

这篇文章主要介绍"js怎么实现本地时间轴"，在日常操作中，相信很多人在js怎么实现本地时间轴问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答"js怎么实现本地时间轴"的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

背景需求

使用 D3 绘制图表一般都会绘制一个坐标轴，但是用 D3 画过图的同学都知道默许情况下绘制的坐标轴刻度是英文的。但是我们要的刻度是中文的。

默认格式化：

d3.time.format("%b %Y")

本地格式化：

zh.timeFormat("%Y年%b")

实现思路

思路很简单：

定义简体中文本地化

用本地时间格式化函数格式化数轴的刻度值

关键技术

定义新的简体中文本地化

//简体中文本地化
var zh = 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月"] });

定义时间比例尺

//时间比例尺 var timeScale = d3.time.scale() .domain([new Date(2015, 0, 1), new Date(2016, 1, 1)]) .range([0, width-40]);

指定轴的比例尺和格式化函数

//时间轴 var axis = d3.svg.axis() .scale(timeScale) .tickFormat(zh.timeFormat("%Y年%b"))//指定为本地格式化函数 .orient("bottom")

绘制数轴

//添加时间轴 var svg = 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.tick text).attr(transform,translate(30,20)rotate(30))

本例很简单，可使用下面的代码测试效果，你学会了吗？

完全代码