roughViz 一個可重用，功能強大的手繪圖表組件

時間 2019-11-05

標籤 roughviz 一個重用功能強大圖表組件简体版

原文原文鏈接

前段時間介紹過一個chart.xkcd 的手繪圖表組件，roughViz 是另一個，同時也提供了
比較多的圖表類型，api 參考文檔也比較全html

支持的圖表類型

Bar
Horizontal Bar
Donut
Line
Pie
Scatter

簡單使用

直接使用html 頁面git

引用組件

           
         <!DOCTYPE html> 
        
         <html lang="en"> 
        
         <head> 
        
             <meta charset="UTF-8"> 
        
             <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        
             <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
        
             <title>demo</title> 
        
         </head> 
        
         <body> 
        
             <div style="display: inline;"> 
        
                     <div id="vis0" style="display: inline;"></div> 
        
                     <div id="vis1" style="display: inline;"></div> 
        
             </div> 
        
         ​ 
        
             <script src="https://unpkg.com/rough-viz@1.0.2"></script> 
        
             <script> 
        
                 // 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, 
        
                     } 
        
                 ); 
        
             </script> 
        
         </body> 
        
         </html>