第一步：官网下载压缩包https://www.hcharts.cn/download

第二步：HTML中引入highcharts.js

<!DOCTYPE html>
<html><head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="/highcharts/highcharts.js"></script>
</head>
<body>
    <div id="report-view" style="min-width:400px;height:400px"></div>
</body>
</html>

第三步：书写js代码

// 调用，为方便起见，此处没有再封装函数
    $(function(){
        $.post(url,data,function(json){
            if(json.status =="0"){
                viewData(json.result);
            }else{
                alert('请求失败');
            }
        },"json");
    }); 

//初始化折线图
    function viewData(data){
        var chart = new Highcharts.Chart('report-view', {
            credits: {
                enabled: false
            },
            title: {
                text: data.s_time,
                x: -20
            },
            xAxis: {
                categories: data.hour
            },
            yAxis: {
                title: {
                    text: '总计'
                }
            },
            tooltip: {
                valueSuffix: ''
            },
            legend: {
                align: 'center',
                verticalAlign: 'bottom',
                borderWidth: 0
            },
            series: [{
                name: '交易总额（元）',
                color:"#196fec",
                data: stringToNumber(data.amount)
            }, {
                name: '订单数（个）',
                color:"#7c09ef",
                data: stringToNumber(data.order_num)
            }, {
                name: '注册用户（个）',
                color:"#f90d55",
                data: stringToNumber(data.registered_user)
            }]
        });
    }

//将字符串格式化为数字,方便渲染
    function stringToNumber(data) {
        if($.isArray(data)) {
            return data.map(function(item){
                return Number(item);
            })
        }
        if(isString(data)) {
            return Number(data);
        }
    }

其中json的数据格式如下：

{
"status":0,
"msg":"加载成功",
    "result":{
        "s_time":"2017-11-02",
        "hour":[
            "00:00","01:00","02:00","03:00","04:00","05:00","06:00","07:00","08:00","09:00","10:00","11:00","12:00","13:00","14:00","15:00","16:00","17:00","18:00","19:00","20:00","21:00","22:00","23:00"
        ],
        "amount":[
            "0.00","0.00","0.00","2793.00","3192.00","7589.00","15960.00","22159.00","55972.00","53973.00","10374.00","18672.00","9576.00","9177.00","31122.00","10773.00",
            "41895.00","31521.00","7182.00","11172.00","27930.00","5985.00","35511.00","5187.00"
        ],
        "order_num":[
            0,0,0,"1","1","2","2","2","1","1","1","2","1","1","2","2","2","2","1","2","3","1","2","1"
        ],
        "registered_user":[
            0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
        ]
    }
}

效果图如下：

highcharts折线图的简单使用的更多相关文章

  1. jquery和highcharts折线图、柱形图、饼状图-模拟后台传參源代码

    js代码: <script type="text/javascript"> $(function(){ showLine(); showColumn(); showPi ...

  2. highcharts 折线图

    <!doctype html> <html lang="en"> <head> <script type="text/javas ...

  3. highcharts折线图-柱形图等

    https://www.highcharts.com.cn/demo/highcharts/line-basic

  4. Highcharts折线图_结合ajax实现局部刷新

    1.首先,在https://www.hcharts.cn/下载Highcharts的组件. 2.然后,引用 <script src="../code/highcharts.js&quo ...

  5. Highcharts之折线图

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. C#中Chart的简单使用（柱状图和折线图）

    首先创建一个windows窗体应用程序,在工具箱—>数据中拖拽一个Chart控件,设置ChartArea背景色为黄色,Legend背景色为绿色,三个Series,Name属性分别为1,2,3,添 ...

  7. echarts实现折线图

    前端框架使用的angular,折线图使用echarts实现. 这里实现的折线图只是简单是折线图,折线图显示在table中,不需要xy轴的数据说明. 1. item.component.html < ...

  8. ASP.NET MVC中使用highcharts 生成简单的折线图

        直接上步骤:   生成一个options,选项包含了一些基本的配置,如标题,坐标刻度,serial等: 配置X轴显示的Category数据,为一个数组: 配置Y轴显示的数据,也为一个数据: 用 ...

  9. highcharts实例教程一：结合php与mysql生成折线图

    Highcharts是一款纯javascript和html5编写的图表库,不仅几乎能兼容所有pc浏览器,而且对ios和android手机端的兼容 性也不错,它能够很简单便捷的在Web网站或Web应用中 ...

随机推荐

  1. ubuntu18.04 下利用conda安装opencv3

    ubuntu18.04 下利用conda安装opencv3 安装opencv3 conda install -c https://conda.anaconda.org/menpo opencv3 出现 ...

  2. JVM垃圾收集器-G1收集器

    G1收集器是当前收集器技术发展的最前沿成果,在JDK1.6_Updata14中提供了Early Access版本的G1收集器以供适用.G1收集器是垃圾收集器理论进一步发展的产物,它与前面的CMS收集器 ...

  3. java-多线程（下）&GUI

    ###25.01_多线程(单例设计模式)(掌握) * 单例设计模式:保证类在内存中只有一个对象. * 如何保证类在内存中只有一个对象呢?     * (1)控制类的创建,不让其他类来创建本类的对象.p ...

  4. Ubuntu使用命令行打印文件

    Ubuntu使用命令行打印文件 正文 环境: Ubuntu 16.04.3 LTS HP Deskjet InkAdvantage 4648 准备步骤 安装Common UNIX Printing S ...

  5. Python项目依赖并生成requirements.txt

    一起开发项目的时候总是要搭建环境和部署环境的,这个时候必须得有个python第三方包的list,一般都叫做requirements.txt. 如果一个项目使用时virtualenv环境,还好办 pip ...

  6. 【SQL】 借助游标来实现文本的分列与合并

    有时我们会遇到需要把表中个别字段拆分成多条数据或是把多条数据合并到一起的情况.一般的编程语言都有函数“split”和“join”来实现,而SQL中既没有这些函数也没有类似数组和列表这类方便保存成组数据 ...

  7. Sqlsession 的理解

    MyBatis的持久化解决方案是将用户从原始的JDBC访问中解放出来,用户只需要定义需要操作的SQL语句,无须关注底层的JDBC操作,就可以以面向对象的方式来进行持久化层操作.底层数据库连接的获取,数 ...

  8. crontab（暂存待完善）

    crontab  -e 编辑 ,(使用默认编辑器) -l  列出 第1列分钟1-59 第2列小时1-23(0表示子夜) 第3列日1-31 第4列月1-12 第5列星期0-6(0表示星期天) 第6列要运 ...

  9. linux 软件应用

    grub2 安装grub2到某分区 mount /mnt/dev /dev/sdb2 //这里选择你刚才分区的第二个分区 sudo grub-install --root-directory=/mnt ...

  10. 华为4K机顶盒EC6108V9U从原联通更换为电信的IPTV账号成功经验

    4K设备直接在淘宝上买30块钱升级4K机顶盒,i视视手机app控制电视和手机投屏 硬件设备:EC6108V9U由X省联通更换为四川电信 采坑经验: 1.要从现有的机顶盒获取mac地址.stbid.ip ...