Table 태그에 Class를 추가하기만 하면 그래프와 차트를 구현할 수 있는 CSS 프레임워크를 사용해 보자(Charts.css)

9363 단어 HTML그래프chart.jsCSS초보자

소개



Charts.css라는 HTML 클래스 지정만으로 차트와 그래프를 표시 할 수있는 프레임 워크가 있다는 것을 알았으므로 어떤 것을 시도했습니다.

Charts.css



공식 사이트

htps // 짱 rtscss. rg/
htps : // 기주 b. 이 m/쨩 rtsCッs/짱rts. cs



CDN 지정



· CSS 설정으로 다음을 지정

sample.html
<link rel="stylesheet" href="https://unpkg.com/charts.css/dist/charts.min.css">

CDN을 지정하고 테이블 태그에 클래스를 추가합니다. charts-css 다음에 차트의 종류, 그리고 옵션등입니다.

sample.html
<table class="charts-css bar hide-data show-primary-axis show-data-axes">
  ...
</table>

종류는 이하와 같은 것이 있습니다만, 아직 Underver Development가 되고 있는 것도 있습니다.
색상과 라벨, 3D 효과, 애니메이션 등이 있습니다.



샘플에서는 아래와 같은 각국의 메달 수를 표시할 수 있는 것이 나왔습니다.
소스 코드 : h tps // 짱 rtscs s. 오 rg / 코 m 포넨 ts / 및 l ps /



혼합된 차트


  • 간단한 Mixed Charts를 작성해 보았습니다.
  • 그래프 안에 숫자를 넣을 수는 있었지만, 눈금을 넣을 수 없다고 했습니다. 역시 간단하게 테이블 데이터를 그래프 차트화할 수 있는 것이 판매라고 생각하므로, 세세한 것은 할 수 없는 것이 있을 것 같습니다. (눈금은 최소한이어야한다고 생각합니다.)
  • 꺾은 선 그래프는, 시점과 종점을 넣을 수 있는 형태이므로, 중앙에 설정할 수 없다고 했습니다.



    • sampleMixed.html
    <!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>CSS CHART</title>
    <link rel="stylesheet" href="https://unpkg.com/charts.css/dist/charts.min.css">
    <style>
    #my-chart {
      position: relative;
      height: 550px;
      width: 100%;
      max-width: 800px;
      margin: 0 auto;
    }
    #my-chart > table {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
    #my-column {
      --color: lightblue;
    }
    #my-line {
      --color: darkgreen;
    }
    </style>
  </head>

  <body>

    <div id="my-chart">

      <table class="charts-css column show-heading show-labels data-spacing-20 show-primary-axis" id="my-column">
        <caption>グラフタイトルの設定</caption>
        <tbody>
          <tr><th scope="row"> 2020/7 </th><td style="--size: calc( 30000 / 150000 );">\30,000</td></tr>
          <tr><th scope="row"> 2020/8 </th><td style="--size: calc( 60000 / 150000 );">\60,000</td></tr>
          <tr><th scope="row"> 2020/9 </th><td style="--size: calc( 90000 / 150000 );">\90,000</td></tr>
          <tr><th scope="row"> 2020/10 </th><td style="--size: calc( 120000 / 150000 );">\120,000</td></tr>
        </tbody>
      </table>

      <table class="charts-css line" id="my-line">
        <tbody>
          <tr><th scope="row"> 2020/7 </th><td style="--start: 0.2; --size: 0.8;"></td></tr>
          <tr><th scope="row"> 2020/8 </th><td style="--start: 0.8; --size: 0.6;"></td></tr>
          <tr><th scope="row"> 2020/9 </th><td style="--start: 0.6; --size: 0.7;"></td></tr>
          <tr><th scope="row"> 2020/10 </th><td style="--start: 0.7; --size: 0.9;"></td></tr>
        </tbody>
      </table>

    </div>
  </body>
</html>

    요약


  • HTML 테이블에 클래스를 추가하면 그래프와 차트를 구현할 수 있습니다.
  • 벌써 HTML에 Table 데이터가 있어, 그 아래 근처에 조금 그래프를 넣고 싶다고 생각했을 때에 편리하지 않을까요.
  • 테이블 데이터를 외부로부터 읽어, 월일등에 의해 데이터가 바뀌어 가는 경우등은 조금 하기 어렵고, 세세한 설정을 실시할 때에는, Chart.js 쪽이 사용하기 편리하다고 합니다.

    • 참고 URL

    React/TypeScript/chart.js 메모
    React/chart.js&react-chartjs-2로 산점도

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage