扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 精选 >js怎么实现本地时间轴
  • 314

0
分享到

js怎么实现本地时间轴

2023-06-27 10:06:46 314人浏览 安东尼
摘要

这篇文章主要介绍“js怎么实现本地时间轴”，在日常操作中，相信很多人在js怎么实现本地时间轴问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”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))

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

完全代码

<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; 
//时间比例尺 
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)) script>

到此，关于“js怎么实现本地时间轴”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！

--结束END--

本文标题: js怎么实现本地时间轴

本文链接: https://lsjlt.com/news/309593.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • js怎么实现本地时间轴
    这篇文章主要介绍“js怎么实现本地时间轴”，在日常操作中，相信很多人在js怎么实现本地时间轴问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”js怎么实现本地时间轴”的疑惑有所帮助！接下来，请跟着小编一起来学习吧...
    99+
    2023-06-27
  • JS实现时间轴自动播放
    最近实现了一个这样的效果，点击播放按钮，时间轴开始播放，点击暂停，停止在当前位置，当再次点击播放的时候，从当前位置开始继续播放，也可以点击相应的年份，切换过去，这时候播放自动暂停，当...
    99+
    2024-04-02
  • css怎么实现最基本的时间轴
    这篇文章给大家分享的是有关css怎么实现最基本的时间轴的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。原型：代码： <!DOCTYPE html ><html>...
    99+
    2023-06-08
  • JS如何实现时间轴自动播放
    这篇文章主要为大家展示了“JS如何实现时间轴自动播放”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“JS如何实现时间轴自动播放”这篇文章吧。最近实现了一个这样的效果，点击播放按钮，时间轴开始播放，...
    99+
    2023-06-20
  • html+js实现动态显示本地时间
    复制代码 代码如下: <span style="font-size:18px"><html> <span style="white-space:pre"...
    99+
    2022-11-15
    html 本地时间
  • vue怎么实现横向时间轴
    这篇文章给大家分享的是有关vue怎么实现横向时间轴的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。具体内容如下1、效果图2、代码实现 html<template>  <...
    99+
    2023-06-29
  • Vue怎么实现时间轴功能
    这篇文章主要介绍了Vue怎么实现时间轴功能的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Vue怎么实现时间轴功能文章都会有所收获，下面我们一起来看看吧。<template>  &...
    99+
    2023-06-29
  • CSS3中怎么实现时间轴动画
    这篇文章将为大家详细讲解有关CSS3中怎么实现时间轴动画，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。实现效果html<h3>CSS3 Timeline</h3><...
    99+
    2023-06-08
  • 如何利用JS实现时间轴动画效果
    目录css动画什么是时间轴动画？动画对象动画函数思考总结css动画 在前端开发中，一些简单的动效往往是使用 css3 的 @keyframes 来实现的 ，如： .div1 { ...
    99+
    2024-04-02
  • Flutter时间轴Timeline的实现
    首先看看时间轴效果图 实现的难点就是左边的时间线，右边的事件说白了就是一个ListView，仔细观察一下会发现圆圈在ListView的一个item上，想明白这些我们就可以把圆圈...
    99+
    2024-04-02
  • Vue.js实现时间轴功能
    本文实例为大家分享了Vue.js实现时间轴功能的具体代码，供大家参考，具体内容如下 GitHub 时间轴组件封装 Main.js <template> <...
    99+
    2024-04-02
  • Vue实现时间轴效果
    本文实例为大家分享了Vue实现时间轴效果的具体代码，供大家参考，具体内容如下 时间轴上的时间点数和描述文本均可自定义设置 效果图如下： ①创建时间轴组件Timeline.vue： ...
    99+
    2024-04-02
  • vue实现横向时间轴
    本文实例为大家分享了vue实现横向时间轴的具体代码，供大家参考，具体内容如下 1、效果图 2、代码实现  html <template>   <div ...
    99+
    2024-04-02
  • Vue实现时间轴功能
    本文实例为大家分享了Vue实现时间轴功能的具体代码，供大家参考，具体内容如下 <template>   <div class="container">    ...
    99+
    2024-04-02
  • 小程序时间轴组件怎么实现
    这篇文章主要介绍“小程序时间轴组件怎么实现”，在日常操作中，相信很多人在小程序时间轴组件怎么实现问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”小程序时间轴组件怎么实现”的疑惑有所帮助！接下来，请跟着小编一起来...
    99+
    2023-06-26
  • Android中怎么实现一个简易时间轴
    这期内容当中小编将会给大家带来有关Android中怎么实现一个简易时间轴，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。新建一个自定义控件：public class WorkExcVie...
    99+
    2023-05-30
    android
  • vue+swiper实现时间轴效果
    本文实例为大家分享了vue+swiper实现时间轴效果的具体代码，供大家参考，具体内容如下 效果： 首先引入，有淘宝镜像的用 cnpm install swiper --save ...
    99+
    2024-04-02
  • 使用CSS3怎么实现一个时间轴效果
    这篇文章将为大家详细讲解有关使用CSS3怎么实现一个时间轴效果 ，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。什么是csscss是一种用来表现HTML或XML等文件样式的计算机语言，主要是用...
    99+
    2023-06-08
  • 如何使用Jquery实现时间轴
    这篇文章将为大家详细讲解有关如何使用Jquery实现时间轴，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。一、纵向折叠时间轴1、js文件（jQuery.js或者jQuery...
    99+
    2024-04-02
  • vue实现物流时间轴效果
    本文实例为大家分享了vue实现物流时间轴效果的具体代码，供大家参考，具体内容如下 son组件(物流时间轴组件) <template> <div class...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作