highcharts.js实现曲线图、柱状图等

最新推荐文章于 2023-04-24 09:37:07 发布
最新推荐文章于 2023-04-24 09:37:07 发布
阅读量3.4k 收藏 2
点赞数
分类专栏： html html5 前端jQuery 文章标签： highcharts.js html 曲线图 柱状图 山形图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiejinwen/article/details/55666905
版权
前端jQuery 同时被 3 个专栏收录
10 篇文章 0 订阅
订阅专栏
html
2 篇文章 0 订阅
订阅专栏
html5
1 篇文章 0 订阅
订阅专栏
最近都在做数据的图标显示，使用的是highcharts.js插件，现在来记录一下，以免后期久了没用又忘记了；下面先添加两个链接：

highcharts.js的API：https://api.hcharts.cn/highcharts

highcharts.js的使用 教程：https://www.evget.com/article/2014/8/27/21514.html

1、实现一条曲线的数据图：

<div id="container"></div>

<script src="js/jQuery.js"></script>
<script src="js/highcharts.js"></script>

<script> 
   $(function () { 
        var data_average = [ 92.5, 91.6, 90.6, 91.6, 91.6 ]; /* 每一天24小时数据，总共6个数据，分为4小时显示一个当时的情绪的平均数据 */

        $('#container').highcharts({
            chart: {
               backgroundColor: {
                linearGradient: [0, 0, 500, 500],
                stops: [
                    [0, '#56a3c4'],
                    [1, '#6dc290']
                ]
            },/* 改变整个图的背景颜色 */
                type: 'spline'/* 制定图的类型 */
            },

            color: ['#333'],

            title: {
                text: '情绪' /* 标题上 */
            },

            subtitle: {
                text: '' /* 标题下 */
            },

            xAxis: {
                labels:{
                    style:{
                        color: '#000'/* 设置轴标签字体颜色 */
                    }
                },
                categories: ['04:00', '08:00', '12:00', '16:00', '20:00','24:00']/* x轴标签 */
            },
            yAxis: {
                title: {
                    text: ''/* y轴说明 */
                },
                plotBands: [{ // Light air
                    from: 70,
                    to: 80,
                    color: '#333',
                    label: {
                        text: '不正常',
                        style: {
                            color: '#fff'
                        }
                    }
                }, { // Light breeze
                    from: 80,
                    to: 90,
                    color: '#f60',
                    label: {
                        text: '正常',
                        style: {
                            color: '#fff'
                        }
                    }
                }, { // Gentle breeze
                    from: 90,
                    to: 100,
                    color: '#eee',
                    label: {
                        text: '不正常',
                        style: {
                            color: '#333'
                        }
                    }
                }],
                labels: {
                    formatter: function () {
                        return this.value + '';/*回调javascript函数来格式化标签，值通过this.value获得*/
                    },
                    style:{
                        color: '#000'
                    }
                },
                max: 100,
                min: 70,
                tickInterval: 5/* y轴间隔 */ 
            },
            tooltip: {
                crosshairs: true,
                shared: true
            },
            plotOptions: {
                series: {/* 设定折线条颜色 */
                    /*color: '#fff'*/
                },
                spline: {/*
                    dataLabels: {// 每个点能显示y轴的数据 
                        enabled: true
                    },*/
                    marker: {
                        radius: 4,
                        lineColor: '#333',
                        lineWidth: 1 /* 曲线条的宽度 */
                    },
                }
            },
            series: [
            {
                name: '情绪',
                marker: {
                    symbol: 'diamond'
                },
                data: [{
                    y: data_average[0],/* 初始值 */
                }, data_average[1], data_average[2], data_average[3], data_average[4], data_average[5] ],/* x轴对应的y轴的每个数据 */
                color: 'blue'
            }]
        });
    });

</script>


2、实现多条曲线的数据图：

 $(function () {
        var Water = document.getElementById('total_water');
        var data = [ 0, 1000, 200, 2320, 100,0 ]; /* 每一天24小时数据，总共6个数据，分为4小时一个，每个都是四小时水分的总和 */
        var  data1= [ 0, 350, 4200, 25, 628, 0 ]; /* 每一天24小时数据，总共6个数据，分为4小时一个，每个都是四小时蛋白质的总和 */
         var data2 = [ 0, 2220, 1320, 0, 626, 1520 ]; /* 每一天24小时数据，总共6个数据，分为4小时一个，每个都是四小时内糖分的总和 */
        var total_data = 0;

        for (var i=0; i<data.length; i++ ){
            total_data += data[i];
        }

        Water.innerHTML = total_data; /* 计算每天 水分的总和 */

        $('#container').highcharts({
            chart: {
                backgroundColor: {
                linearGradient: [0, 0, 500, 500],
                stops: [
                    [0, '#56a3c4'],
                    [1, '#6dc290']
                ]
            },/* 改变整个图的背景颜色 */
                type: 'spline'/* 制定图的类型 */
            },

            color: ['#333'],

            title: {
                text: '' /* 标题上 */
            },

            subtitle: {
                text: '' /* 标题下 */
            },

            xAxis: {
                labels:{
                    style:{
                        color: '#000'/* 设置轴标签字体颜色 */
                    }
                },
               categories: ['04:00', '08:00', '12:00', '16:00', '20:00','24:00']/* x轴标签 */
            },
            yAxis: {
                title: {
                    text: ''/* y轴说明 */
                },
                plotBands: [{ // Light air
                    from: 0,
                    to: 1500,
                    color: '#fff',
                    label: {
                        text: '不正常',
                        style: {
                            color: '#333'
                        }
                    }
                }, { // Light breeze
                    from: 1500,
                    to: 3500,
                    color: '#f60',
                    label: {
                        text: '正常',
                        style: {
                            color: '#fff'
                        }
                    }
                }, { // Gentle breeze
                    from: 3500,
                    to: 5000,
                    color: '#333',
                    label: {
                        text: '不正常',
                        style: {
                            color: '#fff'
                        }
                    }
                }],
                labels: {
                    formatter: function () {
                        return this.value + 'g';/*回调javascript函数来格式化标签，值通过this.value获得*/
                    },
                    style:{
                        color: '#000'
                    }
                },
                max: 5000,
                min: 0,
                tickInterval: 1000/* y轴间隔 */ 
            },
            tooltip: {
                crosshairs: true,
                shared: true
            },
            plotOptions: {
                series: {/* 设定折线条颜色 */
                    color: '#fff'
                },
                spline: {
                    dataLabels: {/* 每个点能显示y轴的数据 */
                        enabled: true
                    },
                    marker: {
                        radius: 4,
                        lineColor: '#333',
                        lineWidth: 1 /* 曲线条的宽度 */
                    },
                }
            },
            series: [{
                name: '水分',
                marker: {
                    symbol: 'diamond'
                },
                data: [{
                    y: data[0],/* 初始值 */
                }, data[1], data[2], data[3], data[4], data[5]],/* x轴对应的y轴的每个数据 */
                color: '#333' /* 该条曲线的颜色 */
            },
            {
                name: '蛋白质',
                marker: {
                    symbol: 'diamond'
                },
                data: [{
                    y: data[0],/* 初始值 */
                }, data1[1],data1[2], data1[3], data1[4], data1[5]],/* x轴对应的y轴的每个数据 */
                color: '#f60'
            },
            {
                name: '糖分',
                marker: {
                    symbol: 'diamond'
                },
                data: [{
                    y: data[0],/* 初始值 */
                }, data2[1], data2[2], data2[3], data2[4], data2[5]],/* x轴对应的y轴的每个数据 */
                color: 'red'
            }
            ]
        });
    });

</script>



3、实现柱状图：

<script> 
   $(function () {
        var Step = document.getElementById('total_step');
        var data = [ 680, 3500, 4500, 2500, 681,5002,1001 ]; /* 每一天24小时数据，总共6个数据，分为4小时一个，每个都是四小时步数的总和 */
        var total_data = 0;

        for (var i=0; i<data.length; i++ ){
            total_data += data[i];
        }

        Step.innerHTML = total_data; /* 计算每天 步数的总和 */

        Highcharts.chart('container1', {
        chart: {
           /* backgroundColor: '#67b99e',/* 改变整个图的背景颜色 */
            backgroundColor: {
                linearGradient: [0, 0, 500, 500],
                stops: [
                    [0, '#56a3c4'],
                    [1, '#6dc290']
                ]
            },
            type: 'column'
        },
        title: {
            text: '运动报告',/* 上标题 */
            style: {
                color: '#fff',
                fontSize: '24px'
            }
        },
        subtitle: {
            text: ''/* 下标题 */
        },
        xAxis: {
             labels:{
                    style:{
                        color: '#000'/* 设置轴标签字体颜色 */
                    }
                },
            type: 'category'
        },
        yAxis: {
            title: {
                text: ''
            },
            plotBands: [{ // Light air
                from: 0,
                to: 1500,
                color: '#333',
                label: {
                    text: '不正常',
                    style: {
                        color: '#fff'
                    }
                }
            }, { // Light breeze
                from: 1500,
                to: 3500,
                color: '#f60',
                label: {
                    text: '正常',
                    style: {
                        color: '#fff'
                    }
                }
            }, { // Gentle breeze
                from: 3500,
                to: 5000,
                color: '#eee',
                label: {
                    text: '不正常',
                    style: {
                        color: '#333'
                    }
                }
            }],
            labels: {
                    formatter: function () {
                        return this.value + '步';/*回调javascript函数来格式化标签，值通过this.value获得*/
                    },
                    style:{
                        color: '#000'
                    }
                },
                max:5000,
                min: 0,
                tickInterval: 1000/* y轴间隔 */ 
        },
        legend: {
            enabled: false
        },
        plotOptions: {
            series: {
                borderWidth: 0,
                dataLabels: {
                    enabled: true,
                    format: '{point.y:.1f}'/* 给单位 */
                }
            }
        },
        series: [{
            name: '计步',
            colorByPoint: true,
            data: [{
                name: '周一',/* x轴标签 */
                y: data[0]
            }, {
                name: '周二',
                y: data[1]
            }, {
                name: '周三',
                y: data[2]
            }, {
                name: '周四',
                y: data[3]
            }, {
                name: '周五',
                y: data[4]
            }, {
                name: '周六',
                y: data[5]
            }, {
                name: '周日',
                y: data[6]
            }]
        }]
    });
});

</script>


4.实现山形图：

<script>
$(function () {
    data_max = [4500, 3500, 4500, 4800, 4100, 4300, 4100];
    data_average = [3400, 2600, 3710, 3500, 3800, 3500, 3400];
    data_min = [1000, 900, 1600, 1700, 1400, 1100, 500];
    $('#dbp').highcharts({
        chart: {
            type: 'area',
            backgroundColor: '#33cc99'
        },
        title: {
            text: '血压报告',
            style: {
                color: '#fff',
                fontSize: '24px'
            }
        },
        subtitle: {
            text: '舒张压',
            style: {
                color: '#fff',
                fontSize: '16px'
            }
        },
        xAxis: {
            categories: ['周一', '周二', '周三', '周四', '周五','周六','周日'],/* x轴标签 */
            allowDecimals: false,
            labels: {
                formatter: function () {
                    return this.value; // clean, unformatted number for year
                },
                style:{
                    color: '#000'/* 设置轴标签字体颜色 */
                }
            }
        },
        yAxis: {
            title: {
                text: ''
            },
            plotBands: [{ // Light air
                from: 0,
                to: 1500,
                color: '#333',
                label: {
                    text: '不正常',
                    style: {
                        color: '#fff'
                    }
                }
            }, { // Light breeze
                from: 1500,
                to: 3500,
                color: '#f60',
                label: {
                    text: '正常',
                    style: {
                        color: '#fff'
                    }
                }
            }, { // Gentle breeze
                from: 3500,
                to: 5000,
                color: '#eee',
                label: {
                    text: '不正常',
                    style: {
                        color: '#333'
                    }
                }
            }],
            labels: {
                formatter: function () {
                    return this.value+ '';
                },
                style:{
                    color: '#000'
                }
            },
            max:5000,
            min: 0,
            tickInterval: 1000/* y轴间隔 */
        },
        tooltip: {
            pointFormat: '{series.name} <b>{point.y:,.0f}</b><br/>',
            style:{
                    color: '#000'
                }
        },
        plotOptions: {
            area: {
                /*pointStart: 1993,*/
                marker: {
                    enabled: false,
                    symbol: 'circle',
                    radius: 2,
                    states: {
                        hover: {
                            enabled: true
                        }
                    }
                }
            }
        },
        series: [{
            name: '最大值',
            data: [ data_max[0],data_max[1],data_max[2],data_max[3],data_max[4],data_max[5],data_max[6] ],
            color: '#003366'
        },
        {
            name: '平均值',
            data: [ data_average[0],data_average[1],data_average[2],data_average[3],data_average[4],data_average[5],data_average[6] ],
            color: '#006633'
        },
        {
            name: '最小值',
            data: [ data_min[0], data_min[1], data_min[2], data_min[3], data_min[4], data_min[5], data_min[6] ],
            color: '#333'
        }]
    });
});
</script>
<!-- 绘制舒张压结束 -->

<!-- 绘制收缩压 -->
<div id="syp"></div>
<hr />
<hr />
<script>
$(function () {
    data_max = [4500, 3500, 4500, 4800, 4100, 4300, 4100];
    data_average = [3400, 2600, 3710, 3500, 3800, 3500, 3400];
    data_min = [1000, 900, 1600, 1700, 1400, 1100, 500];
    $('#syp').highcharts({
        chart: {
            type: 'area',
            backgroundColor: '#33cc99'
        },
        title: {
            text: '',
            style: {
                color: '#fff',
                fontSize: '24px'
            }
        },
        subtitle: {
            text: '收缩压',
            style: {
                color: '#fff',
                fontSize: '16px'
            }
        },
        xAxis: {
            categories: ['周一', '周二', '周三', '周四', '周五','周六','周日'],/* x轴标签 */
            allowDecimals: false,
            labels: {
                formatter: function () {
                    return this.value; // clean, unformatted number for year
                },
                style:{
                    color: '#000'/* 设置轴标签字体颜色 */
                }
            }
        },
        yAxis: {
            title: {
                text: ''
            },
            plotBands: [{ // Light air
                from: 0,
                to: 1500,
                color: '#333',
                label: {
                    text: '不正常',
                    style: {
                        color: '#fff'
                    }
                }
            }, { // Light breeze
                from: 1500,
                to: 3500,
                color: '#f60',
                label: {
                    text: '正常',
                    style: {
                        color: '#fff'
                    }
                }
            }, { // Gentle breeze
                from: 3500,
                to: 5000,
                color: '#eee',
                label: {
                    text: '不正常',
                    style: {
                        color: '#333'
                    }
                }
            }],
            labels: {
                formatter: function () {
                    return this.value+ '';
                },
                style:{
                    color: '#000'
                }
            },
            max:5000,
            min: 0,
            tickInterval: 1000/* y轴间隔 */
        },
        tooltip: {
            pointFormat: '{series.name} <b>{point.y:,.0f}</b><br/>',
            style:{
                    color: '#000'
                }
        },
        plotOptions: {
            area: {
                /*pointStart: 1993,*/
                marker: {
                    enabled: false,
                    symbol: 'circle',
                    radius: 2,
                    states: {
                        hover: {
                            enabled: true
                        }
                    }
                }
            }
        },
        series: [{
            name: '最大值',
            data: [ data_max[0],data_max[1],data_max[2],data_max[3],data_max[4],data_max[5],data_max[6] ],
            color: '#003366'
        },
        {
            name: '平均值',
            data: [ data_average[0],data_average[1],data_average[2],data_average[3],data_average[4],data_average[5],data_average[6] ],
            color: '#006633'
        },
        {
            name: '最小值',
            data: [ data_min[0], data_min[1], data_min[2], data_min[3], data_min[4], data_min[5], data_min[6] ],
            color: '#333'
        }]
    });
});
</script>


Gavin__Xie
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
highcharts-zh_CN.js 文件下载
01-18
highcharts、highstock常用图表格式化工具文件，官网例子：https://www.hcharts.cn/demo/highstock/basic-line
highcharts-zh_CN.js
03-01
Highcharts 是一个用纯 JavaScript 编写的一个图表库， 能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。 Highcharts 支持的图表类型有直线图、曲线图、区域图、柱状图、饼状图、散状点图、仪表图、气泡图、瀑布流图等多达 20 种图表，其中很多图表可以集成在同一个图形中形成混合图。
java整合highcharts统计图，
qq_34943832的博客
01-28 1453
exporting.js、highcharts-zh_CN.js、highcharts.js
highcharts api 中文网 折线图、曲线图、区域图、3D图、柱状图示例以及使用
为梦想放生,创造梦一样的未来！
04-17 3739
highcharts api  中文网 地址：http://www.hcharts.cn/demo/index.php?p=10&theme=skies 代码示例 $(function () { $('#container').highcharts({ title: { text: 'Monthly Aver
js图表控件：highcharts的应用(二)
weixin_33881050的博客
05-23 75
柱状图 前台代码： <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="zhuxingtu2.aspx.cs" Inherits="hhh.zhuxingtu2" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T...
highcharts 小结
博学之,审问之,慎思之,明辨之,笃行之
01-03 674
最近一个多月都在用highcart 做统计分析及展示，做个总结。本文主要写写自己的一些过程： highchart VS echarts DEMO 万能方法 相关点 highcharts VS echarts 稳定性 兼容性 官方DEMO API 美观程度 特性 在选图表用哪个框架的时候 ，最终在这两个之间决定的。稳定性和兼容性以及API，DEMO 两者都很完备的。但我在highcharts 官网看了
小白看过来!有关于highcharts 数据格式 以及案例 下钻
qq_41407619的博客
10-22 1194
小白看过来!有关于highcharts 数据格式 以及案例 下钻 博主新手 最近做了一个highcharts下钻的报表 要求是一级下转 刚开始是导入highcharts常用的几个包highcharts.js，highcharts-zh_CN.js，exporting.js ,drilldown.js(这个是必须导入的 实现下钻的依赖包) 刚刚入手看了官方文档 当时只有各种...
highcharts.js实现柱状图实例
相对静止
04-24 691
<!doctype html> <html lang="en"> <head> <script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script> <script src="https://img.hcharts.cn/highchar...
mysql数据通过highcharts实现一图多曲线实例
1002710030
04-24 97
【代码】highcharts实现一图多曲线实例。
Highcharts使用=====通过指定日期显示曲线
weixin_33720078的博客
07-14 212
1、说明： 　　　　利用HighStock显示曲线，在右上角的日期间隔选择好日期后，重新请求后台数据，重新加载曲线。 2、实现方法： 　　　　在HighStock的rangeSelector中有一个属性inputDateParser，在这里面可以定义一个回调函数，当输入完日期后，会调用这个函数。 3、日期的取得： 　　　　右键查看元素可知，开始日期的input有name=‘min’属性，...
highcharts.js实现曲线图、柱状图、面积图等
04-24
做数据的图标显示，适合用highcharts.js插件来实现，可以做曲线图、柱状图、面积图等
highChart包（含HighCharts.js,可引用设置折线图、柱状图、饼图等）
03-12
含HighCharts.js文档，可用于引用设计折线图、柱状图、饼图等
jQuery.Highcharts.js绘制柱状图饼状图曲线图
10-24
主要介绍了jQuery.Highcharts.js绘制柱状图饼状图曲线图的方法，非常的实用，小伙伴们可以直接拿到项目中使用。
Highcharts饼状图 柱状图 曲线图
09-22
js画饼状图 柱状图 曲线图，实现中文描述，自定义模块名称，用Highcharts实现饼状图 柱状图 曲线图，可参开Highcharts开发文档
highcharts.js，实时折线图需要的样式
11-28
Highcharts 是一个用纯JavaScript编写的一个图表库，HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。
解决ios上audio不能自动播放的问题以及监听audio播放状态
热门推荐
J_W_Xie
06-27 1万+
最近做了个H5产品的宣传活动，用到了audio标签并且要求自动播放，我们都知道safri on ios里面明确指出等待用户的交互动作后才能播放media，也就是说如果你没有得到用户的action就播放的话就会被safri拦截。百度了许多方法，其实很多都说亲测可用，然而都是骗子，用上去之后再iphone还是不能自动播放，这里我是做微信上的H5活动，所以使用了微信上的插件配合就能达到自动播放的效果，在
JSON数据解析（JSON对象与json字符串json数组之间转换）
J_W_Xie
04-19 2409
JSON数据解析（JSON对象与json字符串json数组之间转换） JSON的数据解析 $(function(){ var str = { "comments": [ { "content": "很不错嘛", "id": 1, "nickname": "纳尼" },
ajax的初始化方法$.ajaxSetup();
J_W_Xie
04-20 2277
ajax表单序列化 $(function(){ //有时，我们可能会在同一个程序中多次调用$.ajax()方法。而它们很多参数都相同， //这 个时候我们课时使用 jQuery 提供的$.ajaxSetup()请求默认值来初始化参数。 $('input').on('click',function(){ $.ajaxSetup({ type: 'POS
Highcharts.js的使用
最新发布
06-03
Highcharts.js是一个基于JavaScript的图表库，可以用来制作交互式的图表和数据可视化。以下是使用Highcharts.js的一些步骤： 1. 首先，需要在你的HTML页面中引入Highcharts.js的脚本文件。可以从官网下载最新版本的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值