您當(dāng)前位置：首頁(yè) > web前端 > htmlcss > js數(shù)據(jù)可視化實(shí)戰(zhàn)之本地時(shí)間軸

js數(shù)據(jù)可視化實(shí)戰(zhàn)之本地時(shí)間軸

來(lái)源：程序員人生發(fā)布時(shí)間：2016-04-08 09:08:35 閱讀次數(shù)：4658次

背景需求
繪制效果
實(shí)現(xiàn)思路
關(guān)鍵技術(shù)
完全代碼

背景需求

使用D3繪制圖表1般都會(huì)繪制1個(gè)坐標(biāo)軸，但是用D3畫過(guò)圖的同學(xué)都知道默許情況下繪制的坐標(biāo)軸刻度是英文的。但是我們要的刻度是中文的。怎樣辦呢？且看本文講授如何繪制本地時(shí)間軸。

繪制效果

實(shí)現(xiàn)效果如何，先來(lái)1睹為快！

默許格式化：

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

這里寫圖片描述

本地格式化：

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

本地時(shí)間軸

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

思路很簡(jiǎn)單：

定義簡(jiǎn)體中文本地化
用本地時(shí)間格式化函數(shù)格式化數(shù)軸的刻度值

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

定義新的簡(jiǎn)體中文本地化

//簡(jiǎn)體中文本地化 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);