정보실

웹학교

정보실

javascript 브라우저에서 스케치 / 손으로 그린 ​​스타일 차트를 작성하기 위한 재사용 가능한 JavaScript 라이브러리.

본문

roughViz.js는 브라우저에서 스케치/손으로 그린 ​​스타일 차트를 작성하기 위해 재사용 가능한 JavaScript 라이브러리이며 D3v5, roughjs 및 편리한 기능을 기반으로 합니다.


https://github.com/jwilber/roughViz 


roughViz.js 


왜? 


의사 소통 목표가 절대 정밀도가 아닌 의도 또는 일반성을 표시하는 데이 차트를 사용하십시오. 아니면 그냥 재미 있고 이상해 보이기 때문입니다.


특징


차트 종류 

roughjs의 기능을 각 차트에 적용하십시오.


roughness:

roughness examples 


fillStyle

fillStyle examples 


fillWeight

fillStyle examples 


추가 차트 별 옵션과 함께 (아래 API 참조)


설치 


<script src="https://unpkg.com/rough-viz@1.0.2"></script>


사용하는 방법 


각 차트마다 하나씩 컨테이너 요소를 작성하십시오.


<!--you can name each id whatever you want -->
<div id="viz0"></div>
<div id="viz1"></div>


자바 스크립트에서 원하는 컨테이너를 참조하여 차트를 만듭니다.


// create donut chart from csv file, using default options
 new roughViz.Bar({
    element: '#vis0', // container selection
    data: 'https://raw.githubusercontent.com/jwilber/random_data/master/flavors.csv',
    labels: 'flavor',
    values: 'price'
});

// create Donut chart using defined data & customize plot options
new roughViz.Donut(
  {
    element: '#vis1',
    data: {
      labels: ['North', 'South', 'East', 'West'],
      values: [10, 5, 8, 3]
    },
    title: "Regions",
    width: window.innerWidth / 4,
    roughness: 8,
    colors: ['red', 'orange', 'blue', 'skyblue'],
    stroke: 'black',
    strokeWidth: 3,
    fillStyle: 'cross-hatch',
    fillWeight: 3.5,
  }
);




페이지 정보

조회 49회 ]  작성일19-10-25 17:37

웹학교