frappe-charts表格插件的使用

雨点打透心脏的1/2处 2022-04-24 02:00 231阅读 0赞

### frappe-charts官方文档：     [https://frappe.io/charts][https_frappe.io_charts] ###

### 借助frappe-charts画出一个条形图： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvcmluZ3JheQ_size_16_color_FFFFFF_t_70][]

### 代码如下： ###

<!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>homework3-1BarChart</title>
        <meta charset="utf-8" />
        <script src="https://cdn.jsdelivr.net/npm/frappe-charts@1.1.0/dist/frappe-charts.min.iife.js"></script>
        
    
    </head>
    <body>
        
        <div id="chart"></div>
        <script>
           // Javascript
           let data = {
               labels: ["1999", "2000", "2001", "2002",
                 "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010",
               "2011", "2012", "2013", "2014", "2015", "2016", "2017"],
    
               datasets: [
                 {
                     title: "China GDP", color: "blue",
                     values: [1093997.267, 1211346.87, 1339395.719, 1470550.015, 1660287.966, 1955347.005, 2285965.892, 2752131.773, 3552182.312, 4598206.091,
                         5109953.609, 6100620.489, 7572553.837, 8560547.315, 9607224.482, 10482372.11, 11064666.28, 11190992.55, 12237700.48]
                 }
               ]
           };
    
           let chart = new Chart({
               parent: "#chart", // or a DOM element
               title: "中国GDP历年成长情形（单位：百万美元）",
               data: data,
               type: 'bar', // or 'line', 'scatter', 'pie', 'percentage'
               height: 250,
               barOptions:{
                   spaceRatio: 1.5
               },
               format_tooltip_x: d => (d + '').toUpperCase(),
               format_tooltip_y: d => d + ' pts'
           });
    
    
        </script>
    
    </body>
    </html>

[https_frappe.io_charts]: https://frappe.io/charts
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvcmluZ3JheQ_size_16_color_FFFFFF_t_70]: /images/20220221/e5e31083bf6b48dfa9b814f635bb7dc5.png