Highcharts使用的一些总结

王小婷

发布于 2025-05-18 06:15:22

8800

代码可运行

文章被收录于专栏：编程微刊编程微刊

运行总次数：0

代码可运行

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

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

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

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

五分钟上手代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>三分钟上手Highcharts 图表</title>
</head>
<body>
    <!-- 图表容器 DOM -->
    <div id="container" style="width: 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 //柱子之间的距离值
                    
                }]

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
    // 错误时执行方法
    });