순풍 차트

Tailwind로 구축된 반응형 차트입니다. 막대 차트, 라인 차트, 파이 차트 레이더 차트 등 다양한 유형의 데이터 시각화.

설치

빠른 시작

Tailwind 사용을 시작하려면 스타터를 다운로드하기만 하면 됩니다.

DOWNLOAD ZIP STARTER

Tailwind Elements는 TailwindCSS에서 이미 CSS를 변경하거나 추가하지 않습니다.

구성 요소를 Tailwind 디자인에 직접 복사하면 바로 작동합니다.

일부 동적 구성 요소(드롭다운 또는 모달과 같은)에서는 Font Awesome 아이콘과 사용자 지정 JavaScript를 추가합니다. 그러나 추가 설치가 필요하지 않으며 필요한 모든 코드가 항상 예제에 포함되어 있으며 모든 Tailwind 프로젝트에 복사됩니다. 작동합니다.

MDB GO

커스터마이징

라인 차트


HTML

<div class="shadow-lg rounded-lg overflow-hidden">
  <div class="py-3 px-5 bg-gray-50">
      Line chart
  </div>
  <canvas class="p-10 " id="chartLine"></canvas>
</div>

<!-- Required chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<!-- Chart line -->
<script>

    const labels = [
        'January',
        'February',
        'March',
        'April',
        'May',
        'June',
    ];
    const data = {
        labels: labels,
        datasets: [{
            label: 'My First dataset',
            backgroundColor: 'hsl(252, 82.9%, 67.8%)',
            borderColor: 'hsl(252, 82.9%, 67.8%)',
            data: [0, 10, 5, 2, 20, 30, 45],
        }]
    };

    const configLineChart = {
        type: 'line',
        data,
        options: {}
    };

    var chartLine = new Chart(
        document.getElementById('chartLine'),
        configLineChart
    );
</script>

막대 차트


HTML

<div class="shadow-lg rounded-lg overflow-hidden">
  <div class="py-3 px-5 bg-gray-50">
      Bar chart
  </div>
  <canvas class="p-10 " id="chartBar"></canvas>
</div>

<!-- Required chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<!-- Chart bar -->
<script>

  const labelsBarChart = [
    'January',
    'February',
    'March',
    'April',
    'May',
    'June',
  ];
  const dataBarChart = {
    labels: labelsBarChart,
    datasets: [{
      label: 'My First dataset',
      backgroundColor: 'hsl(252, 82.9%, 67.8%)',
      borderColor: 'hsl(252, 82.9%, 67.8%)',
      data: [0, 10, 5, 2, 20, 30, 45],
    }]
  };

  const configBarChart = {
    type: 'bar',
    data: dataBarChart,
    options: {}
  };


  var chartBar = new Chart(
    document.getElementById('chartBar'),
    configBarChart
  );
</script>

📄 차트 설명서 페이지에서 더 많은 사용자 지정 예제를 볼 수 있습니다.

중요한 자원

다음은 이 구성 요소로 작업하는 데 도움이 되도록 준비한 리소스입니다.

읽기📄 Charts documentation page <-- 여기에서 시작

프로젝트를 최대한 활용하려면 차트와 관련된 다른 구성 요소 옵션도 숙지해야 합니다. 목록을 찾으려면 아래 섹션을 참조하십시오.

프로젝트를 완료한 후 CLI로 게시하여 💽 Free hosting (beta)을 받을 수 있습니다.

관련 구성 요소 옵션 및 기능

Accordion

Alerts

Badges

Button group

Buttons

Cards

Carousel

Chips

Dropdown

Gallery

Headings

Images

List group

Modal

Paragraphs

Popover

Progress

Rating

Spinners

Stepper

Tables

Template

Toast

Tooltip

추가 리소스

학습 로드맵을 통해 웹 개발에 대해 알아보세요.
🎓 Start Learning

메일링 리스트에 가입하고 개발자를 위한 독점 리소스를 받으세요.
🎁 Get gifts

영감과 커뮤니티 경험을 위해 비공개 FB 그룹에 가입하세요.
👨‍👩‍👧‍👦 Ask to join

GitHub의 STAR를 사용하여 오픈 소스 패키지 생성 지원