首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Highcharts柱形范围图使用示例

Highcharts柱形范围图使用示例

作者头像
王小婷
发布2018-08-22 12:35:05
6440
发布2018-08-22 12:35:05
举报
文章被收录于专栏:编程微刊编程微刊

功能需求:统计三种不同的状态在一天的时间段里面所占的范围

图片.png

第一步:引入highcharts.js和highcharts-more.js文件

引入文件文件源码:下载https://img.hcharts.cn/highcharts/highcharts-more.js

<!-- 引入highcharts.js和highcharts-more.js文件 -->
    <script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
    <script src="js/highcharts-more.js"></script>

第二步:

<!-- 图表容器 DOM -->
    <div id="container" style="width: 600px;height:400px;"></div>

第三步 具体示例代码如下:

<!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 src="js/highcharts-more.js"></script>
    <script>
        // 图表配置
        var options = {
           chart: {
        type: 'columnrange', // columnrange 依赖 highcharts-more.js
        inverted: true
    },
           title: {
        text: '智能床垫变化范围'
    },
           subtitle: {
        text: '智能床垫'
    },
    xAxis: {
        categories: ['深睡眠',  '浅睡眠',  '醒着的']
    },
    yAxis: {
        title: {
            text: '时间 ( h )'
        }
    },
    tooltip: {
        valueSuffix: 'h'
    },
    plotOptions: {
        columnrange: {
            dataLabels: {
                enabled: true,
                formatter: function () {
                    return this.y + 'h';
                }
            }
        }
    },
    legend: {
        enabled: false
    },
           series: [{
        name: '温度',
        data: [
            [1, 2],
            [2, 5],
            [5, 9],
        ]
    }]
        };
        // 图表初始化函数
        var chart = Highcharts.chart('container', options);
    </script>
</body>
</html>

测试链接:https://www.hcharts.cn/demo/highcharts/columnrange

原文作者:祈澈姑娘 原文链接:https://www.jianshu.com/u/05f416aefbe1创作不易,转载请告知 90后前端妹子,爱编程,爱运营,爱折腾。坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018.08.16 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档