问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答

想把x轴的h改成日期

头像
喜欢vue的妹子
    5554671

    想实现根据时间显示不同活动的日期范围 如图
    1571760425(1).png
    <!DOCTYPE html>
    <html lang="en">
    <head>

    <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>

    </head>
    <script src="https://code.highcharts.com.c...;></script>

        <script src="https://code.highcharts.com.cn/highcharts/highcharts-more.js"></script>
    <!-- <script src="https://code.highcharts.com.cn/highcharts/modules/exporting.js"></script> -->
    <!-- <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script> -->

    <body>

    <div id="container"></div>
<script>
        // 图表配置
        var options = {
           chart: {
        type: 'columnrange', // columnrange 依赖 highcharts-more.js
        inverted: true
    },
           title: {
        text: '活动上线时间变化范围'
    },
           subtitle: {
        text: '活动上线时间'
    },
    xAxis: {
        categories: ['活动1',  '活动2',  '活动3']
    },
    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
    阅读 2.3k
    2 个回答
    得票最新
    头像
    我是预言家
      1.6k992172

      你可能需要根据日期来获取series的值 比如10-20到10-23 那么指定的data就是3
      但是对于处在中间的柱状图来说 不太好实现吧 一般都是贴紧左侧的 除非用堆叠图 只不过剩下都是你对数据的操作了

      头像
      喜欢vue的妹子
        5554671

        现在还有一个问题 就是这么把右侧的标题放在柱子里面

        图片描述

        <!DOCTYPE html>
        <html lang="en">
        <head>

        <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>

        </head>
        <script src="https://code.highcharts.com.c...;></script>

            <script src="https://code.highcharts.com.cn/highcharts/highcharts-more.js"></script>
    <!-- <script src="https://code.highcharts.com.cn/highcharts/modules/exporting.js"></script> -->
    <!-- <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script> -->

        <body>

        <div id="container"></div>
<script>
      var dataarr=[
            [10.09,10.11],
            [10.13,10.22],
            [10.14, 10.15],
        ];   
        dataarr.forEach(function(item){
         console.log(item)
         item.forEach(function(me){
           console.log(me);
          //  me.replace(/./g,'-')
         })
        });
        // 图表配置
    var options = {
        chart: {
        type: 'columnrange', // columnrange 依赖 highcharts-more.js
        inverted: true
    },
        title: {
        text: '活动上线时间变化范围'
    },
           subtitle: {
        text: '活动上线时间'
    },
    credits:{

    enabled:false

    },
   

    xAxis: {
        categories: ['活动1', '活动2', '活动3','活动4'],
        crosshair: true,
        title: {
            text: '活动'
        }
       
    },
    yAxis: {
        title: {
            text: '时间 ( 日期 )'
        },
        labels: {
            formatter: function (a) {
                  return this.value+'次'
            }
        }
    },
    tooltip: {
        // valueSuffix: 'h'
    },
    plotOptions: {
        columnrange: {
          colorByPoint : true ,
          
            dataLabels: {
                enabled: true,
                
                formatter: function () {
                    return this.y ;
                }
            }
        }
    },
    legend: {
        enabled: false
    },
           series: [{
        name: '活动',
        data: [
        {name:'tl',low:10.09,high:10.11,color:'#ff6e6e'},
        {name:'tl',low:10.13,high:10.22,color:'#00cc66'},
        {name:'tl',low:10.14,high:10.15,color:'#2f69fe'},
        {name:'tl',low:10.16,high:10.17,color:'#ff8e00'},
            // [10.09,10.11],
            // [10.13,10.22],
            // [10.14, 10.15],
        ]
    }],
  
        };
        // 图表初始化函数
        var chart = Highcharts.chart('container', options);
    </script>

        </body>
        </html>

        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题