zoukankan      html  css  js  c++  java
  • Highcharts使用的一些总结

    Highcharts 是一个用纯 JavaScript 编写的一个图表库, 能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表,并且免费提供给个人学习、个人网站和非商业用途使用。

    支持的图表类型有直线图、曲线图、区域图、柱状图、饼状图、散状点图、仪表图、气泡图、瀑布流图等多达 20 种图表,其中很多图表可以集成在同一个图形中形成混合图。

    经过多年的开发和维护拥有着丰富的图表功能和稳定的性能以及专业详细的开发文档上手极其容易,展现出来也是极其的美观简约大气,相比与echarts有完整的实例演示,功能介绍和详细的api文档。

    网址:https://www.hcharts.cn/demo/highcharts
    https://www.hcharts.cn/demo/highcharts/heatmap-canvas

    五分钟上手代码


    5640239-96a23d831225a0c5.png
    图片.png
    
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>三分钟上手Highcharts 图表</title>
    </head>
    <body>
        <!-- 图表容器 DOM -->
        <div id="container" style=" 600px;height:400px;"></div>
        <!-- 引入 highcharts.js -->
        <script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
        <script>
            // 图表配置
            var options = {
                chart: {
                    type: 'bar'                          //指定图表的类型,默认是折线图(line)
                },
                title: {
                    text: '三分钟上手Highcharts 图表'                 // 标题
                },
                xAxis: {
                    categories: ['薄荷糖', '牛奶糖', '巧克力豆']   // x 轴分类
                },
                yAxis: {
                    title: {
                        text: '吃糖个数'                // y 轴标题
                    }
                },
                series: [{ 
                    
                    // 数据列
                    name: '王小婷',                        // 数据列名
                    data: [1, 0, 7],                     // 数据
                }, {
                    name: '安安',
                    data: [2, 4, 3]
                }]
            };
            // 图表初始化函数
            var chart = Highcharts.chart('container', options);
        </script>
    </body>
    </html>
    

    1:Highcharts柱状图宽度

    如何修改Highcharts柱状图柱子的宽度:pointWidth:5 //柱子之间的距离值设置这个属性

    series: [{
                        name: '温度',
                        data: [
                            [1, 2],
                            [2, 5],
                            [5, 9],
                        ],
                        pointWidth:5 //柱子之间的距离值
                        
                    }]
    
    5640239-e41a0810de87b7b4.png
    图片.png

    2:ajax数据交互示例代码

     $.ajax({
            url : "/bison/signIn/count/countOrgan",
            async : false,
            data : {
                beginDate : $("#beginTime").val(),
                endDate : $("#endTime").val(),
                personSex : $("#personSex").val(),
                organIds : getOrganIds(),
                signSetId : $("#signSet option:selected").val(),
            },
            type : 'POST',
            dataType : 'json',
            success : function(data) {
                // 成功时执行的回调方法
                category_data = data.returnData.response.categor;
                natural_data = data.returnData.response.normalList;
                late_data = data.returnData.response.lateList;
                absent_data = data.returnData.response.absentList;
                fun(category_data, natural_data, late_data, absent_data);
            },
            error : erryFunction
        // 错误时执行方法
        });
    
  • 相关阅读:
    MFC Windows 程序设计>WinMain 简单Windows程序 命令行编译
    AT3949 [AGC022D] Shopping 题解
    CF643D Bearish Fanpages 题解
    CF643C Levels and Regions 题解
    CF241E Flights 题解
    CF671C Ultimate Weirdness of an Array 题解
    CF1592F Alice and Recoloring 题解
    GYM 102452E 题解
    CF494C Helping People 题解
    P5556 圣剑护符
  • 原文地址:https://www.cnblogs.com/ting6/p/9725344.html
Copyright © 2011-2022 走看看