Highcharts柱形范围图使用示例-阿里云开发者社区

Highcharts柱形范围图使用示例

2023-11-09 26

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： Highcharts柱形范围图使用示例

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

第一步：引入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>

Highcharts柱形范围图使用示例

热门文章

最新文章

相关电子书