gpt4 book ai didi

JavaScript 图形

转载 作者:行者123 更新时间:2023-12-01 16:25:05 28 4
gpt4 key购买 nike

我试图在 MaterializeCSS 网站上创建一些类似于这个的图形,但我不知道它来自哪里,我查看了整个 MaterializeCSS 网站,它不是框架的一部分,我找不到在代码中他们使用的是什么

我对那些小盒子特别感兴趣:( https://ibb.co/7vZVjZ8 )

Small square graphics

示例网站可以在这里找到: https://themes.materializecss.com/pages/admin-dashboard.html

最佳答案

我猜你可以使用 Chartist.js 做一些修改,看看我的代码笔我为你创建了一个例子

https://codepen.io/icaronz/pen/qBbvmNR

基本上您需要将 Chartist.js 设置为没有任何轴值:

var chart = new Chartist.Line('.ct-chart', {
labels: [1, 2, 3, 4],
series: [
[1, 4, 2, 5],
[2, 3, 1, 4]
]
}, {
showPoint: false,
showLine: false,
showArea: true,
fullWidth: true,
showLabel: false,
axisX: {
showGrid: false,
showLabel: false,
offset: 0
},
axisY: {
showGrid: false,
showLabel: false,
offset: 0
},
chartPadding: 0,
low: 0,
width: 400,
height: 200
});

此外,不要忘记从他们的 CDN 导入必要的 CSS 和 JS

<script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
<link href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css" rel="stylesheet" type="text/css" />

关于JavaScript 图形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63064739/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com