溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

js怎么實(shí)現(xiàn)本地時(shí)間軸

發(fā)布時(shí)間：2022-02-24 15:40:58 來源：億速云 閱讀：240 作者：iii 欄目：開發(fā)技術(shù)

這篇文章主要介紹“js怎么實(shí)現(xiàn)本地時(shí)間軸”，在日常操作中，相信很多人在js怎么實(shí)現(xiàn)本地時(shí)間軸問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”js怎么實(shí)現(xiàn)本地時(shí)間軸”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

背景需求

使用 D3 繪制圖表一般都會(huì)繪制一個(gè)坐標(biāo)軸，但是用 D3 畫過圖的同學(xué)都知道默許情況下繪制的坐標(biāo)軸刻度是英文的。但是我們要的刻度是中文的。

默認(rèn)格式化：

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

本地格式化：

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

實(shí)現(xiàn)思路

思路很簡單：

定義簡體中文本地化

用本地時(shí)間格式化函數(shù)格式化數(shù)軸的刻度值

關(guān)鍵技術(shù)

定義新的簡體中文本地化

//簡體中文本地化 
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月"] });

定義時(shí)間比例尺

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

指定軸的比例尺和格式化函數(shù)

//時(shí)間軸 var axis = d3.svg.axis() .scale(timeScale) .tickFormat(zh.timeFormat("%Y年%b"))//指定為本地格式化函數(shù) .orient("bottom")

繪制數(shù)軸

//添加時(shí)間軸 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);

調(diào)劑刻度樣式

//旋轉(zhuǎn)文字 d3.selectAll(g.tick text).attr(transform,translate(30,20)rotate(30))

本例很簡單，可使用下面的代碼測試效果，你學(xué)會(huì)了嗎？

完全代碼

<meta charset="utf⑻"> 
<style> body{ font-weight:bold; } 
.axis path, 
.axis line { fill: none; stroke: #000; shape-rendering: crispEdges; } 
</style> 
<body> 
<script src="../../d3.js"> <script> 
//簡體中文本地化 
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月"] }); 
//svg寬，高 
var width = 1000,height = 500; 
//時(shí)間比例尺 
var timeScale = d3.time.scale() .domain([new Date(2015, 0, 1), new Date(2016, 1, 1)]) .range([0, width-40]); 
//時(shí)間軸 
var axis = d3.svg.axis() .scale(timeScale) .tickFormat(zh.timeFormat("%Y年%b")) .orient("bottom") 
//添加時(shí)間軸 
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); 
//旋轉(zhuǎn)文字
 d3.selectAll(g.tick text).attr(transform,translate(30,20)rotate(30)) script>

到此，關(guān)于“js怎么實(shí)現(xiàn)本地時(shí)間軸”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

js
AI
助
手