카테고리

차트

그래프를 사용한 데이터의 시각적 표현

다크 모드 막대 차트

다크 모드를 지원하는 데이터를 표시하기 위한 반응형 막대 차트입니다.

                <template>
  <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4">
    <div class="w-full max-w-4xl bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6">
      <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Sales Data</h2>
      <div class="relative h-60 lg:h-80">
        <!-- Bars -->
        <div class="absolute bottom-0 left-0 right-0 top-0 flex items-end justify-around px-4">
          <!-- Example bars - adjust height based on your data -->
          <div class="w-8 bg-blue-500 dark:bg-blue-600 rounded-t-lg h-3/4">
            <span class="block text-center text-xs font-medium text-gray-700 dark:text-gray-300 mt-1">75%</span>
          </div>
          <div class="w-8 bg-green-500 dark:bg-green-600 rounded-t-lg h-2/3">
             <span class="block text-center text-xs font-medium text-gray-700 dark:text-gray-300 mt-1">66%</span>
          </div>
          <div class="w-8 bg-red-500 dark:bg-red-600 rounded-t-lg h-4/5">
             <span class="block text-center text-xs font-medium text-gray-700 dark:text-gray-300 mt-1">80%</span>
          </div>
          <div class="w-8 bg-yellow-500 dark:bg-yellow-600 rounded-t-lg h-1/2">
             <span class="block text-center text-xs font-medium text-gray-700 dark:text-gray-300 mt-1">50%</span>
          </div>
           <div class="w-8 bg-indigo-500 dark:bg-indigo-600 rounded-t-lg h-3/5">
             <span class="block text-center text-xs font-medium text-gray-700 dark:text-gray-300 mt-1">60%</span>
          </div>
           <div class="w-8 bg-purple-500 dark:bg-purple-600 rounded-t-lg h-2/4">
             <span class="block text-center text-xs font-medium text-gray-700 dark:text-gray-300 mt-1">50%</span>
          </div>
            <div class="w-8 bg-pink-500 dark:bg-pink-600 rounded-t-lg h-1/3">
             <span class="block text-center text-xs font-medium text-gray-700 dark:text-gray-300 mt-1">33%</span>
          </div>
        </div>
        <!-- X-axis Labels -->
        <div class="absolute bottom-0 left-0 right-0 h-8 flex items-center justify-around text-gray-600 dark:text-gray-400 text-sm">
          <span>Jan</span>
          <span>Feb</span>
          <span>Mar</span>
          <span>Apr</span>
          <span>May</span>
          <span>Jun</span>
          <span>Jul</span>
        </div>
      </div>
    </div>
  </div>
</template>

차트 구성 요소

파스텔 색상과 다크 모드를 지원하는 간단하고 반응이 빠른 차트 구성 요소로, 호버 효과를 통한 미묘한 마이크로 인터랙션으로 블로그/콘텐츠 소비를 위해 설계되었습니다. 자바스크립트가 없습니다.

미리보기 열기

                <div class="container mx-auto p-4">
  <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
    <h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Sales Overview</h2>
    <div class="flex flex-col space-y-4">
      <div class="flex items-center justify-between hover:scale-105 transition-transform duration-200 eas-in-out cursor-pointer p-2 rounded-md bg-blue-100 dark:bg-blue-700">
        <div class="text-sm font-medium text-blue-800 dark:text-blue-200">January</div>
        <div class="w-2/3 bg-blue-200 dark:bg-blue-600 rounded-full h-4">
          <div class="bg-blue-500 dark:bg-blue-400 h-4 rounded-full stunning-animation" style="width: 75%;"></div>
        </div>
        <div class="text-sm font-medium text-blue-800 dark:text-blue-200">75%</div>
      </div>
      <div class="flex items-center justify-between hover:scale-105 transition-transform duration-200 eas-in-out cursor-pointer p-2 rounded-md bg-green-100 dark:bg-green-700">
        <div class="text-sm font-medium text-green-800 dark:text-green-200">February</div>
        <div class="w-2/3 bg-green-200 dark:bg-green-600 rounded-full h-4">
          <div class="bg-green-500 dark:bg-green-400 h-4 rounded-full stunning-animation" style="width: 60%;"></div>
        </div>
        <div class="text-sm font-medium text-green-800 dark:text-green-200">60%</div>
      </div>
      <div class="flex items-center justify-between hover:scale-105 transition-transform duration-200 eas-in-out cursor-pointer p-2 rounded-md bg-purple-100 dark:bg-purple-700">
        <div class="text-sm font-medium text-purple-800 dark:text-purple-200">March</div>
        <div class="w-2/3 bg-purple-200 dark:bg-purple-600 rounded-full h-4">
          <div class="bg-purple-500 dark:bg-purple-400 h-4 rounded-full stunning-animation" style="width: 90%;"></div>
        </div>
        <div class="text-sm font-medium text-purple-800 dark:text-purple-200">90%</div>
      </div>
    </div>
  </div>
</div>

차트 구성 요소

반응형 효과와 어두운 테마를 지원하는 간단하고 미니멀한 차트 구성 요소입니다.

미리보기 열기

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
  <h2 class="text-lg font-semibold mb-4 text-gray-800 dark:text-white">Sales Performance</h2>
  <div class="flex justify-between items-center mb-4">
    <div class="text-sm text-gray-500 dark:text-gray-400">Last 30 Days</div>
    <select class="text-sm text-gray-500 dark:text-gray-400 bg-transparent border-none">
      <option>Monthly</option>
      <option>Weekly</option>
      <option>Daily</option>
    </select>
  </div>
  <div class="h-40">
    <!-- Placeholder for chart -->
    <div class="flex items-end h-full">
      <div class="w-1/6 bg-blue-500 h-3/4 rounded-t dark:bg-blue-600"></div>
      <div class="w-1/6 bg-blue-500 h-2/4 rounded-t dark:bg-blue-600 ml-1"></div>
      <div class="w-1/6 bg-blue-500 h-1/4 rounded-t dark:bg-blue-600 ml-1"></div>
      <div class="w-1/6 bg-blue-500 h-full rounded-t dark:bg-blue-600 ml-1"></div>
      <div class="w-1/6 bg-blue-500 h-3/4 rounded-t dark:bg-blue-600 ml-1"></div>
      <div class="w-1/6 bg-blue-500 h-2/4 rounded-t dark:bg-blue-600 ml-1"></div>
    </div>
  </div>
</div>

차트 구성 요소

Tailwind CSS를 사용하여 어두운 테마를 지원하는 반응형 3D 스타일 차트 구성 요소입니다.

미리보기 열기

                <div class="max-w-4xl mx-auto p-5 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md">
    <h2 class="text-2xl text-center font-bold mb-5 text-gray-900 dark:text-gray-100">3D Charts Component</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/400/200?random=1" alt="Chart Image 1" class="w-full h-32 object-cover rounded-b-lg">
            <div class="p-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Chart 1</h3>
                <p class="text-gray-600 dark:text-gray-400">This is a description of chart 1 with some insightful data visualizations.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/400/200?random=2" alt="Chart Image 2" class="w-full h-32 object-cover rounded-b-lg">
            <div class="p-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Chart 2</h3>
                <p class="text-gray-600 dark:text-gray-400">This is a description of chart 2 with engaging three-dimensional data models.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/400/200?random=3" alt="Chart Image 3" class="w-full h-32 object-cover rounded-b-lg">
            <div class="p-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Chart 3</h3>
                <p class="text-gray-600 dark:text-gray-400">This is a description of chart 3 with innovative 3D elements.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/400/200?random=4" alt="Chart Image 4" class="w-full h-32 object-cover rounded-b-lg">
            <div class="p-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Chart 4</h3>
                <p class="text-gray-600 dark:text-gray-400">This is a description of chart 4 that highlights key metrics.</p>
            </div>
        </div>
    </div>
    <div class="mt-5 text-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full mx-auto mb-2">
        <p class="text-gray-700 dark:text-gray-300">Created by John Doe</p>
    </div>
</div>

RetroCharts구성 요소

Tailwind CSS를 사용하여 반응형 효과와 어두운 테마를 지원하는 레트로/빈티지 차트 구성 요소입니다. 자리 표시자 이미지를 포함합니다.

미리보기 열기

                <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-md">
  <h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-gray-200">Sales Performance</h2>
  <div class="relative h-48">
    <!-- Placeholder SVG for chart - In a real application, this would be a charting library -->
    <svg class="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
      <path fill="#4B5563" d="M0,100 L0,80 C10,75 20,78 30,70 C40,65 50,68 60,60 C70,55 80,58 90,50 C100,45 100,100 Z" class="dark:fill-gray-700"></path>
      <path fill="#6B7280" d="M0,100 L0,85 C10,80 20,83 30,75 C40,70 50,73 60,65 C70,60 80,63 90,55 C100,50 100,100 Z" class="dark:fill-gray-600"></path>
    </svg>
    <div class="absolute top-0 left-0 w-full h-full flex items-center justify-center text-gray-600 dark:text-gray-300 text-sm font-mono">Chart Data Not Available</div>
  </div>
  <div class="mt-4 flex justify-between text-gray-700 dark:text-gray-300 text-sm">
    <span>January</span>
    <span>February</span>
    <span>March</span>
    <span>April</span>
    <span>May</span>
  </div>
</div>

차트 구성 요소

반응형 디자인과 어두운 테마가 있는 미니멀리스트 차트 구성 요소는 Tailwind CSS를 사용합니다.

미리보기 열기

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
  <h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Sales Overview</h2>
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    <div class="flex items-center justify-between">
      <div class="text-sm text-gray-500 dark:text-gray-300">Revenue</div>
      <div class="text-lg font-bold text-green-500">$12,450</div>
    </div>
    <div class="flex items-center justify-between">
      <div class="text-sm text-gray-500 dark:text-gray-300">Profit</div>
      <div class="text-lg font-bold text-blue-500">$5,600</div>
    </div>
  </div>
  <div class="mt-4">
    <div class="w-full h-32 bg-gray-200 dark:bg-gray-700 rounded-lg"></div>
  </div>
</div>