jQuery 高图插件

jQuery 为程序员提供了一个非常现代且高度交互的高图插件，以实现用于表示或比较 Web 和移动应用程序数据的图表。它是多平台的，支持 SVG。

您必须在工作文件夹中下载所需的文件，以便程序员可以将其包含在 HTML 结构页面的头部部分，如在以下程序中实现的那样。

下载链接：

https://www.highcharts.com/blog/download/

示例 1：以下示例使用高图插件演示了不同状态及其人口的水平条形图。

    
        
        
        jQuery Highcharts Plugin
           
        
        
        
        
   
        
           
        body{
         text-align:center;
        }
           
        .highcharts-data-table table, highcharts-figure{
            min-width: 310px; 
            max-width: 650px;
            margin: 2em auto;
        }
   
        #containerDivID{
            height: 450px;
        }
   
        .highcharts-data-table table {
            font-family: Arial;    
            border: 2px solid #e9e9e9;
            margin: 10px auto;
            text-align: center;
            max-width: 500px;
            width: 90%;
               
        }
        .highcharts-data-table caption {
            padding: 1em 0;
            font-size: 1.1em;
            color: #FFFF;
        }
        .highcharts-data-table tr:hover {
            background: #bedaff;
        }
        .highcharts-data-table th {
            font-weight: 600;
            padding: 0.5em;
        }
        .highcharts-data-table td, 
        .highcharts-data-table th, 
        .highcharts-data-table caption {
            padding: 0.6em;
        }
        .highcharts-data-table thead tr, 
        .highcharts-data-table tr:nth-child(even) {
            background: #f8f8f8;
        }
   
   
        
    
    
      GeeksforGeeks
      jQuery Highcharts Plugin
        
            
            
               Column bar charts showing population
               data for various states in India.
            
   
        
   
        
           
            Highcharts.chart('containerDivID', {
                chart: {
                    type: 'bar'
                },
                title: {
                    text: 'India Population by states'
                },
                  
                xAxis: {
                    categories: ['Karnataka', 'Telangana', 
                                 'Punjab', 'Assam', 'Orissa'],
                      
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: 'Population (lakhs)',
                        align: 'high'
                    },             
                },
                tooltip: {
                    valueSuffix: 'lakhs'
                },
                plotOptions: {
                    bar: {
                        dataLabels: {
                            enabled: true
                        }
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'top',
                    x: -50,
                    y: 100,       
                    borderWidth: 5,
                    backgroundColor: Highcharts.defaultOptions
                         .legend.backgroundColor || '#FFFFFF',
                       
                },
                credits: {
                    enabled: false
                },
                series: [{
                    name: 'Year 2000',
                    data: [1107, 231, 6351, 4203, 2329]
                }, {
                    name: 'Year 2005',
                    data: [1233, 1526, 1947, 1408, 1261]
                }, {
                    name: 'Year 2010',
                    data: [1814, 8641, 3714, 4727, 2191]
                }, {
                    name: 'Year 2015',
                    data: [1276, 1301, 4436, 6238, 2247]
                }]
            });
        
    

输出：

例 2：下面的例子演示了使用高图插件表示特定年份单个用户访问各种网站的 3D 饼图。

    
        
        
        jQuery Highcharts Plugin
          
        
                
                
                
                
          
        
  
            body{
              text-align: center;
            }        
            #containerDivID 
            {
              height: 500px; 
            }
  
            .highcharts-figure, 
            .highcharts-data-table table 
            {
              min-width: 310px; 
              max-width: 600px;
              margin: 2em auto;
            }
  
            .highcharts-data-table table
            {
              font-family: Arial;
              border-collapse: collapse;
              border: 2px solid #e9e9e9;
              margin: 10px auto;
              text-align: center;
              width: 90%;
              max-width: 550px;
            }
            .highcharts-data-table td, 
            .highcharts-data-table th, 
            .highcharts-data-table caption 
            {
              padding: 0.6em;
            }
            .highcharts-data-table caption 
            {
              padding: 2em 0;
              font-size: 1.3em;
              color: #FFFF;
            }
            .highcharts-data-table th 
            {
              font-weight: 600;
              padding: 0.5em;
            }
            .highcharts-data-table tr:hover
            {
              background: #f8f8f8;
            }
            .highcharts-data-table thead tr, 
            .highcharts-data-table tr:nth-child(even)
            {
              background: #ffffff;
            }
  
           
    
    
        
              GeeksforGeeks
        
        jQuery Highcharts Plugin
  
        
            
                    
                This demonstrates the usage of 3D pie chart.
                Select or de-select any portion from the 
                chart for information.       
              
        
  
        
          
                Highcharts.chart('containerDivID', {
                    chart: {
                        type: 'pie',
                        options3d: {
                            enabled: true,
                            alpha: 45,
                            beta: 0
                        }
                    },
                    title: {
                        text: 'Websites accessed in 2020'
                    },
                    accessibility: {
                        point: {
                            valueSuffix: '%'
                        }
                    },
                    tooltip: {
                        pointFormat: '{series.name}: {point.percentage:.1f}%'
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            depth: 30,
                            dataLabels: {
                                enabled: true,
                                format: '{point.name}'
                            }
                        }
                    },
                    series: [{
                        type: 'pie',
                        name: 'Website used',
                        data: [
                            ['GeeksforGeeks', 55.0],
                            ['NDTV', 27.5],           
                            ['youTube', 9.5],
                            ['google', 7.2],
                            ['Others', 1.5]
                        ]
                    }]
                });
        
    

输出：

示例 3：通过对 jQuery 代码进行如下简单更改，可以类似地实现上述示例以表示 3D 甜甜圈饼图。输出图表如下图所示。

          
        Highcharts.chart('containerDivID', {
            chart: {
                type: 'pie',
                options3d: {
                    enabled: true,
                    alpha: 45
                }
            },
            title: {
                text: 'Information about monthly grocery'
            },
            subtitle: {
                text: '3D donut pie charts'+
                      ' using highcharts plugin'
            },
            plotOptions: {
                pie: {
                    innerSize: 100,
                    depth: 45
                }
            },
            series: [{
                name: 'Delivered amount in kgs',
                data: [
                    ['Wheat flour', 8],
                    ['Brown Rice', 5],
                    ['Millets', 3],
                    ['Ragi flour', 7],
                    ['Gram flour', 9],
                    ['Oats', 3],
                    ['Lentils', 4],
                    ['Chickpeas', 2],
                    ['Blackbeans', 6]
                ]
            }]
        });
 

输出 ：

所有使用高图插件实现的图表都可以扩展到HighchartTable插件。使用高图库，存在一种将 HTML 表格数据转换为所需图表的方法。

除了Highchart插件的文件之外，下载链接用于在 head 部分包含所需的文件。

示例 4：以下示例演示了非常基本的HighchartTable插件用法，其中显示了带有每月费用的柱形图。

    
        jQuery HighchartTable Plugin
        
  
        
        
          
        
        
            body 
            {
               font-family: Arial;
               text-align:center;
            }
            #containerDivID{
              width:550px;
              height:auto;
            }
        
    
    
        GeeksforGeeks
        jQuery HighchartTable Plugin
        
            
                
                    
                        
                        
                    
                
                
                    
                        
                        
                    
                    
                        
                        
                    
                    
                        
                        
                    
                    
                        
                        
                    
                    
                       
                       
                    
                    
                       
                       
                    
                
            MonthExpenditureJanuary18000February15000March13000April22000May12000June12000           
        
     
        
           $(document).ready(function() {
              $('table.highchart').highchartTable();
           });
      
        
    

输出：

示例 5：以下示例演示使用HighchartTable插件的折线图。

    
        jQuery HighchartTable Plugin
        
  
        
        
        
        
        
            body {
                font-family: Arial;
                text-align: center;
            }
            #containerDivID {
                width: 550px;
                height: auto;
            }
        
    
    
        
          GeeksforGeeks
        
        jQuery HighchartTable Plugin
        
            
                
                
                    
                        
                        
                    
                
                
                    
                        
                        
                    
                    
                        
                        
                    
                    
                        
                        
                    
                    
                        
                        
                    
                    
                        
                        
                    
                
            
                    This shows line graph for 
                    monthly expense
                MonthExpenditureJanuary18000February15000March13000April22000May12000
        
        
            $(document).ready(function () {
                $("table.highchart").highchartTable();
            });
        
    

输出 ：

示例 6：以下示例使用Highchart插件演示气泡图，该插件表示围绕 3 个维度的数据。气泡图通常绘制采用 x 值、y 值和 z（大小）值的图形。水平 x 和垂直 y 是值轴，z 表示其大小。

    
    
    jQuery Highcharts Plugin
   
    
    
    
    
    
   
    
        body {
            text-align: center;
        }
        .highcharts-figure,
        .highcharts-data-table table {
            min-width: 310px;
            max-width: 600px;
            margin: 2em auto;
        }
   
        #containerDivID {
            height: 500px;
        }
   
        .highcharts-data-table table {
            font-family: Arial;
            border-collapse: collapse;
            border: 2px solid #e9e9e9;
            margin: 10px auto;
            text-align: center;
            width: 90%;
            max-width: 550px;
        }
        .highcharts-data-table caption {
            padding: 2em 0;
            font-size: 1.3em;
            color: #ffff;
        }
        .highcharts-data-table th {
            font-weight: 600;
            padding: 0.5em;
        }
        .highcharts-data-table td,
        .highcharts-data-table th,
        .highcharts-data-table caption {
            padding: 0.5em;
        }
        .highcharts-data-table thead tr,
        .highcharts-data-table tr:nth-child(even) {
            background: #f8f8f8;
        }
        .highcharts-data-table tr:hover {
            background: #ffffff;
        }
    


    GeeksforGeeks
    jQuery Highcharts Plugin
   
    
        
        
            Bubble chart showing total products with their 
            sales achieved and market shares in percentage.
        
    
   
    
        Highcharts.chart("containerDivID", {
            chart: {
                type: "bubble",
                plotBorderWidth: 1,
                zoomType: "xy",
            },
   
            legend: {
                enabled: false,
            },
   
            title: {
                text: "Sales and market share of"+
                      " products in the market",
            },
   
            accessibility: {
             point: {
                 valueDescriptionFormat: "{index}. {point.name}, "+
                                         "Product count: {point.x}, "+
                                         "Sales: Rs.{point.y}, "+
                                         "Market share: {point.z}%.",
             },
            },
            xAxis: {
                gridLineWidth: 1,
                title: {
                    text: "Total number of products sold",
                },
                labels: {
                    format: "{value} ",
                },
                plotLines: [
                    {
                        color: "black",
                        dashStyle: "dot",
                        width: 2,
                        value: 25,
                        label: {
                            rotation: 0,
                            y: 15,
                            style: {
                                fontStyle: "arial",
                            },
                            text: "Good number of products sold",
                        },
                        zIndex: 3,
                    },
                ],
                accessibility: {
                    rangeDescription: "Range: 20 to 30 numbers.",
                },
            },
   
            yAxis: {
                startOnTick: false,
                endOnTick: false,
                title: {
                    text: "Sales achieved",
                },
                labels: {
                    format: "Rs.{value} ",
                },
                maxPadding: 0.2,
                plotLines: [
                    {
                        color: "black",
                        dashStyle: "dot",
                        width: 2,
                        value: 50,
                        label: {
                            align: "right",
                            style: {
                                fontStyle: "arial",
                            },
                            text: "Good number for products sold",
                            x: -10,
                        },
                        zIndex: 3,
                    },
                ],
                accessibility: {
                    rangeDescription: "Range: 0 to 60, 000 rupees.",
                },
            },
   
            tooltip: {
                useHTML: true,
                headerFormat: "<table>",
                pointFormat:
                    '<tr><th colspan="2">{point.product}</th></tr>' +
                    "<tr><th>Products sold:</th><td>{point.x}</td></tr>" +
                    "<tr><th>Sales achieved :</th><td>Rs.{point.y}</td></tr>" +
                    "<tr><th>Market share:</th><td>{point.z}%</td></tr>",
                footerFormat: "</table>",
                followPointer: true,
            },
   
            plotOptions: {
                series: {
                    dataLabels: {
                        enabled: true,
                        format: "{point.name}",
                    },
                },
            },
   
            series: [
            {
                data: [
                    { x: 16, y: 5900, z: 3, name: "LB", product: "Ladies Bag" },
                    { x: 14, y: 22340, z: 14.7, name: "Sh", product: "Shoes" },
                    { x: 20, y: 60000, z: 15.8, name: "Mbl", product: "Mobile" },
                    { x: 18, y: 23500, z: 12, name: "Bks", product: "Books" },
                    { x: 22, y: 32200, z: 42, name: "SK", product: "Saving kit" },
                    { x: 31, y: 55000, z: 35, name: "Cp", product: "Cooking pans" },
                    { x: 17, y: 46000, z: 40, name: "MK", product: "Makeup kit" },
                    { x: 37, y: 19000, z: 10, name: "Pi", product: "Piano" },
                ],
            },
            ],
        });
    

输出：

示例 7：以下示例使用高图插件演示面积图。这些类似于前面演示的折线图，不同之处在于可视化数据的数量。

    
    
    Highcharts Example
  
    
    
    
    
  
    
        body {
            text-align: center;
        }
        .highcharts-figure,
        .highcharts-data-table table {
            min-width: 310px;
            max-width: 600px;
            margin: 2em auto;
        }
  
        #containerDivID {
            height: 500px;
        }
  
        .highcharts-data-table table {
            font-family: Arial;
            border-collapse: collapse;
            border: 2px solid #e9e9e9;
            margin: 10px auto;
            text-align: center;
            width: 90%;
            max-width: 550px;
        }
        .highcharts-data-table caption {
            padding: 2em 0;
            font-size: 1.3em;
            color: #ffff;
        }
        .highcharts-data-table th {
            font-weight: 600;
            padding: 0.5em;
        }
        .highcharts-data-table td,
        .highcharts-data-table th,
        .highcharts-data-table caption {
            padding: 0.5em;
        }
        .highcharts-data-table thead tr,
        .highcharts-data-table tr:nth-child(even) {
            background: #f8f8f8;
        }
        .highcharts-data-table tr:hover {
            background: #ffffff;
        }
    


    GeeksforGeeks
    jQuery Highcharts Plugin
  
    
        
        
            It demonstrates the basic area chart
            showing men and women working strength .
        
    
  
    
        Highcharts.chart("containerDivID", {
            chart: {
                type: "area",
            },
            accessibility: {
                description: "Image description: An area chart compares"+
                             " the working strength of the men and women"+
                             " between 1950 and 2020. The number men or "+
                             " women are plotted on the Y-axis and the "+
                             " years on the X-axis. ",
            },
            title: {
                text: "Men and Women work force",
            },
  
            xAxis: {
                allowDecimals: false,
                labels: {
                    formatter: function () {
                        return this.value;
                    },
                },
                accessibility: {
                 rangeDescription: "Years between : 1950 to 2020.",
                },
            },
            yAxis: {
                title: {
                    text: "Working strength",
                },
                labels: {
                    formatter: function () {
                        return this.value / 1000 + "k";
                    },
                },
            },
            tooltip: {
             pointFormat: "{series.name} reached {point.y:, .0f}"+
                          " in numbers in year {point.x}",
            },
            plotOptions: {
                area: {
                    pointStart: 1950,
                    marker: {
                        enabled: false,
                        symbol: "circle",
                        radius: 2,
                        states: {
                            hover: {
                                enabled: true,
                            },
                        },
                    },
                },
            },
            series: [
                {
                    name: "men",
                    data: [
                        null,
                        null,
                        17,
                        12,
                        17,
                        13,
                        21,
                        14,
                        16,
                        19,
                        32,
                        21,
                        35,
                        25,
                        25,
                        55,
                        125,
                        155,
                        215,
                        427,
                        655,
                        852,
                        1160,
                        1617,
                        1478,
                        1321,
                        2138,
                        4221,
                        4512,
                        4502,
                        4502,
                        4500,
                        4501,
                        5502,
                        6229,
                        7189,
                        8139,
                        9199,
                        10538,
                        18517,
                        12527,
                        10475,
                        11421,
                        10358,
                        10295,
                        10104,
                        12610,
                        12401,
                        11643,
                        13092,
                        14478,
                        15915,
                        17385,
                        19055,
                        21215,
                        23210,
                        22010,
                        23044,
                        25393,
                        27935,
                        21000,
                        26000,
                        29000,
                        28010,
                        29020,
                        27010,
                        25000,
                        24000,
                        31982,
                        32040,
                        31233,
                        39197,
                        45000,
                    ],
                },
                {
                    name: "women",
                    data: [
                        null,
                        null,
                        11,
                        12,
                        22,
                        23,
                        24,
                        27,
                        28,
                        32,
                        27,
                        45,
                        67,
                        78,
                        86,
                        92,
                        112,
                        201,
                        250,
                        289,
                        369,
                        621,
                        1005,
                        1436,
                        2063,
                        3057,
                        4618,
                        5113,
                        5113,
                        4954,
                        4804,
                        4761,
                        4717,
                        4368,
                        4218,
                        6444,
                        9914,
                        9620,
                        9326,
                        9822,
                        15468,
                        18020,
                        17020,
                        16020,
                        15507,
                        14062,
                        12787,
                        13287,
                        14747,
                        13076,
                        12551,
                        12144,
                        11009,
                        10950,
                        10871,
                        11004,
                        14304,
                        23464,
                        24314,
                        23086,
                        22380,
                        21434,
                        24126,
                        27387,
                        29459,
                        31056,
                        29224,
                        27342,
                        26662,
                        26926,
                        27912,
                        28909,
                        28905,
                        27826,
                        25079,
                        25702,
                        24826,
                        24605,
                        30062,
                        32049,
                        33852,
                        35804,
                        37000,
                        35020,
                        33011,
                        31008,
                        37431,
                        43000,
                        41000,
                        39000,
                    ],
                },
            ],
        });
    

输出：

插件中有更多漂亮的图表类型。程序员可以根据应用的需求进行探索和实现。