使用 Tailwind CSS 和 Chart.js 的仪表盘小部件
先保存，稍后再看。
大家好。通过这篇文章，我们将学习如何借助 Tailwind CSS 和 Chart.js 创建一个仪表盘小部件（如封面照片所示）！
让我们直接进入正题🚀
第一步：列入资产清单
您可以通过 CDN 或 NPM 来实现。我这里使用的是 CDN。
<link rel="stylesheet"
href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
/>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.css"
/>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js">
</script>
步骤 2：构建界面
这包括制作卡片、放置文字和图表。
<div class="min-w-screen min-h-screen bg-gray-200 flex items-center justify-center px-5 py-5">
<div class="w-full max-w-3xl">
<div class="-mx-2 md:flex">
<div class="w-full md:w-1/3 px-2">
<div class="rounded-lg shadow-sm mb-4">
<div class="rounded-lg bg-white shadow-lg md:shadow-xl relative overflow:hidden">
<div class="px-3 pt-8 pb-10 text-center relative z-10">
<h4 class="text-sm uppercase text-gray-500 leading-tight">
Followers
</h4>
<h3 class="text-3xl text-gray-700 font-semibold leading-tight my-3">
13,579
</h3>
<p class="text-xs text-green-500 leading-tight">
🔺 40.9%
</p>
</div>
<div class="absolute bottom-0 inset-x-0">
<canvas id="chart1" height="70"></canvas>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
步骤 3：添加图表
这是生成图表所需的 JavaScript 代码。
<script>
const chartOptions = {
maintainAspectRation: false,
legend: {
display: false
},
tooltips: {
enable: false
},
elements: {
point: {
radius: 0
}
},
scales: {
xAxes: [
{
gridLines: false,
scaleLabel: false,
ticks: {
display: false
}
}
],
yAxes: [
{
gridLines: false,
scaleLabel: false,
ticks: {
display: false,
suggestedMin: 0,
suggestedMax: 10
}
}
]
}
};
var ctx = document.getElementById("chart1").getContext("2d");
var chart = new Chart(ctx, {
type: "line",
data: {
labels: [1, 2, 1, 3, 5, 4, 7],
datasets: [
{
backgroundColor: "rgba(101, 116, 205, 0.1)",
borderColor: "rgba(101, 116, 205, 0.8)",
borderWidth: 2,
data: [1, 2, 1, 3, 5, 4, 7]
}
]
},
options: chartOptions
});
</script>
输出！
结果就是这样。
恭喜！您已成功创建仪表盘小部件。请根据您的喜好进行修改，并在下方评论区分享！
🙌🏻
感谢阅读。如果您喜欢这篇文章，请点赞并关注我们，以便获取更多文章！
PS：想看下一篇帖子写什么内容？请在评论区告诉我。