風上図

Trewindで構築された応答チャート.データのさまざまな種類の可視化-棒グラフ、ライングラフ、円グラフレーダーチャート、および多く.

インストール

クイックスタート
Tailwindを使用して起動するには、単に私たちのスターターをダウンロードします.
DOWNLOAD ZIP STARTER
Tailwind要素は、TarWindCSSからのすべてのCSSを変更または追加しません.
あなたは直接あなたのTarwindデザインに我々の構成要素をコピーすることができます、そして、彼らはすぐに働きます.
いくつかの動的なコンポーネント(dropdownsまたはmodalsのような)では、フォント素晴らしいアイコンとカスタムJavaScriptを追加します.しかし、彼らは追加のインストールを必要としません、すべての必要なコードは常に例に含まれていて、どんなTailwindプロジェクトにでもコピーされます-それは働きます.

MDBゴー

カスタマイズ

ラインチャート

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

重要資源
以下は、このコンポーネントを使用して作業するための準備用のリソースです.

読める📄 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の上でスターによるオープンソースパッケージのサポート作成