我是一名软件开发人员，致力于创建前端仪表板。我应该在不使用任何插件的情况下创建所有这些。只是纯粹的 JQuery 和 JavaScript 以及样式。我正在开发一个没有插件的径向仪表。我需要将以下内容添加到我的仪表中。请帮助我。
- 刻度线显示从 0 到 100 的最小值和最大值。
body {
background: #fff;
}
#radial:before {
background: yellowgreen;
border-radius: 220px 220px 0 0;
/* box-shadow: 3px 1px 8px rgba(2, 1, 1, 0.15) inset; */
content: "";
height: 100px;
position: absolute;
width: 350px;
}
#radial {
border-radius: 400px 400px 0 0;
height: 100px;
margin: 50px auto 0;
overflow: hidden;
position: relative;
width: 200px;
}
#radial:after {
background: rgb(255, 255, 255);
border-radius: 140px 140px 0 0;
bottom: 0;
box-shadow: 3px 1px 8px rgba(0, 0, 0, 0.15);
/* color: rgba(255, 80, 0, 0.7); */
content: "";
font-family: Lato, Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 3.5em;
font-weight: 100;
height: 70px;
left: 30px;
line-height: 95px;
position: absolute;
text-align: center;
width: 140px;
}
#needle {
background: radial-gradient(black, red);
border-radius: 8px;
bottom: -4px;
/* box-shadow: 3px -1px 4px rgba(0, 0, 0, 0.4); */
display: block;
height: 8px;
position: absolute;
width: 100px;
transform-origin: 100% 4px;
transform: rotate(0deg);
transition:8s ;
z-index: 2;
/* border-top-left-radius: 5px;
border-top-right-radius: 5px; */
clip-path: polygon(100% 0%, 0% 50%, 100% 100% );
}
#radial:hover span {
transform: rotate(180deg);
}
/* h1,
p,
strong {
display: block;
font-family: Lato;
text-align: center;
}
h1 {
margin-bottom: 0.1em;
}
p {
margin-top: 0;
}
strong {
color: #be1e1e;
font-size: 2.5em;
} */<html>
<head>
<tite></tite>
<link rel="stylesheet" href="GaugeCss_last.css">
<!-- <script type="text/javascript"></script> -->
</head>
<head>
</head>
<body>
<div id="radial" data-value="0">
<span id="needle" value="8"></span>
<span id="spacing"></span>
</div>
</body>
</html>最佳答案
也许你可以尝试修改你的current needle as a tick?
关于javascript - 如何在径向量规上创建刻度线和等间距？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58765823/