Komponenten für die Datenvisualisierung
Eine Webkomponente für die Datenvisualisierung im Material Design-Stil mit Tailwind CSS, mit responsiven Layouts, Unterstützung für dunkle Designs und Platzhalterbildern.
HTML-Code
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg transition-shadow duration-300">
<h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Data Visualization Components</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg shadow-md">
<h3 class="text-lg font-medium text-gray-800 dark:text-white">Bar Chart</h3>
<img src="https://picsum.photos/300/200?random=1" alt="Bar Chart" class="w-full h-24 object-cover rounded-md mb-2" />
<p class="text-gray-600 dark:text-gray-300">A simple bar chart representing data.</p>
</div>
<div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg shadow-md">
<h3 class="text-lg font-medium text-gray-800 dark:text-white">Line Chart</h3>
<img src="https://picsum.photos/300/200?random=2" alt="Line Chart" class="w-full h-24 object-cover rounded-md mb-2" />
<p class="text-gray-600 dark:text-gray-300">A line chart visualizing trends over time.</p>
</div>
<div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg shadow-md">
<h3 class="text-lg font-medium text-gray-800 dark:text-white">Pie Chart</h3>
<img src="https://picsum.photos/300/200?random=3" alt="Pie Chart" class="w-full h-24 object-cover rounded-md mb-2" />
<p class="text-gray-600 dark:text-gray-300">A pie chart displaying proportions.</p>
</div>
<div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg shadow-md">
<h3 class="text-lg font-medium text-gray-800 dark:text-white">Scatter Plot</h3>
<img src="https://picsum.photos/300/200?random=4" alt="Scatter Plot" class="w-full h-24 object-cover rounded-md mb-2" />
<p class="text-gray-600 dark:text-gray-300">A scatter plot illustrating distribution.</p>
</div>
<div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg shadow-md">
<h3 class="text-lg font-medium text-gray-800 dark:text-white">Area Chart</h3>
<img src="https://picsum.photos/300/200?random=5" alt="Area Chart" class="w-full h-24 object-cover rounded-md mb-2" />
<p class="text-gray-600 dark:text-gray-300">An area chart showcasing cumulative data.</p>
</div>
<div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg shadow-md">
<h3 class="text-lg font-medium text-gray-800 dark:text-white">Histogram</h3>
<img src="https://picsum.photos/300/200?random=6" alt="Histogram" class="w-full h-24 object-cover rounded-md mb-2" />
<p class="text-gray-600 dark:text-gray-300">A histogram demonstrating frequency distribution.</p>
</div>
</div>
<div class="mt-6 text-center">
<button class="bg-blue-500 text-white font-semibold py-2 px-4 rounded shadow hover:bg-blue-600 transition duration-300">
View More
</button>
</div>
</div>Verwandte Komponenten
Komponente zur Visualisierung von Neumorphism-Daten
Datenvisualisierungskomponente im Neumorphism-Stil für Blog-Inhalte mit pastellfarbenem Farbschema, mäßiger Komplexität, Reaktionsfähigkeit und Unterstützung für den Dunkelmodus.
Komponente zur Datenvisualisierung im Dunkelmodus
Eine komplexe, reaktionsschnelle Datenvisualisierungskomponente mit einem dunklen, monochromatischen Design. Verfügt über mehrere interaktive Visualisierungselemente, darunter ein Liniendiagramm, ein Balkendiagramm und Datenkarten. Enthält Hover-Effekte und nutzt die Unterstützung des Dunkelmodus von Tailwind. Geeignet für Blogs und Plattformen zum Konsum von Inhalten.
Komponenten für die Datenvisualisierung
Eine reaktionsschnelle Datenvisualisierungskomponente, die mit Material Design-Prinzipien wie rasterbasierten Layouts und Tiefeneffekten entwickelt wurde, mit Unterstützung für dunkle Themen.