Question

我尝试为没有日期data的数据系列自定义highstock图表。

series: [{ name: "nameA", data: [value1, value2, ... valueN]}, {...}]

是否有一种方法可以构建this之类的highstock图表，而没有启用rangeSelector.selected设置的日期数据（仅用于值）。
另外，我需要为buttons提供不同的范围，并且没有日期值。

Answer 1

如果您使用highstock.js源代码和chart构造函数，则可以创建具有大量特征的基本图表：

Highcharts.chart('container', {
    series: [{
        data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    }],
    rangeSelector: {
        enabled: true,
        inputDateFormat: '%H:%M:%S.%L',
        inputEditDateFormat: '%H:%M:%S.%L',
        // Custom parser to parse the %H:%M:%S.%L format
        inputDateParser: function(value) {
            value = value.split(/[:\.]/);
            return Date.UTC(
                1970,
                0,
                1,
                parseInt(value[0], 10),
                parseInt(value[1], 10),
                parseInt(value[2], 10),
                parseInt(value[3], 10)
            );
        }
    },
    navigator: {
        enabled: true
    },
    scrollbar: {
        enabled: true
    }
});

实时演示：http://jsfiddle.net/BlackLabel/h1yudspa/

Answer 2

评论中我的问题的答案由ppotaczek提供：

导航器和rangeSelector基于时间，因此您有两个选择。您可以使用毫秒作为基本数字时间值，也可以创建自己的rangeSelecgor并在Highcharts核心中更改导航器轴的类型：example

我选择了带有ms的变体，并设置了下一个选项：

    <!doctype html>
    <html>
    <head>
    <title>dropdown</title>
    <style>
    #nav-main li a.nav-link {
        border-bottom: 3px solid transparent;
        padding-top: 28px;
        padding-bottom: 20px;
        transition: 0.3s all ease-in-out;
        -webkit-transition: 0.3s all ease-in-out;
        -moz-transition: 0.3s all ease-in-out;
        -o-transition: 0.3s all ease-in-out;
        -ms-transition: 0.3s all ease-in-out;
    }

    #nav-main a.nav-link {
        text-decoration: none;
        color: #8c8c8c;
        font-size: 1.4rem;
        font-weight: 600;
        text-transform: uppercase;
    }
    .sub-menu-panel {
        display: none;
        background: #ffffff;
        border-top: 3px solid #212121;
        border-bottom: 3px solid #212121;
        margin-top: -3px;
        transition: 0.3s all ease-in-out;
        -webkit-transition: 0.3s all ease-in-out;
        -moz-transition: 0.3s all ease-in-out;
        -o-transition: 0.3s all ease-in-out;
        -ms-transition: 0.3s all ease-in-out;
    }
    ul li.sub-menu:hover div.sub-menu-pannel{display:grid;}
    ul.nav > li.dropdown:hover > div.dropdown-menu{display: grid;}
    li.sub-menu .sub-menu-panel > a.dropdown:hover + div.dropdown-menu{display: grid;position: absolute;left: -159px;top: 53px;}
    li.sub-menu .sub-menu-panel > a.dropdown + div.dropdown-menu > a.dropdown:hover + div.dropdown-menu{display: grid;}
    </style>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    </head>
    <body>
     <nav role="navigation" id="nav-main" class="okayNav">
                <ul class="nav navbar-nav">
                  <li><a alt="Sencillo" class="nav-link page-scroll" href="#">Home</a></li>
                  <li><a alt="Sencillo" class="nav-link page-scroll" href="#services">Services</a></li>
                  <li><a alt="Sencillo" class="nav-link page-scroll" href="#contact">Contact</a></li>
                  <li><a alt="Sencillo" class="nav-link page-scroll" href="#features">Employee Login</a></li>
                  <li class="dropdown sub-menu active">
                    <a alt="Sencillo" class="dropdown-toggle nav-link" href="#" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" data-hover="dropdown">Products <span class="caret"></span></a>
                    <div class="dropdown-menu sub-menu-panel">
                      <a href="#">item-1</a>
                      <a href="#">item-2</a>
                      <a href="#" class="dropdown">item-3</a>
                        <div class="dropdown-menu">
                        <a href="#">item-31</a>
                        <a href="#">item-32</a>
                        <a href="#" class="dropdown">item-33</a>
                          <div class="dropdown-menu">
                            <a href="#">item-33-1</a>
                            <a href="#">item-33-2</a>
                          </div>
                        </div>
                    </div>
                  </li>
                  <li><a alt="Sencillo" class="nav-link page-scroll" href="#leave-message">Contact</a></li>
                </ul>
              </nav>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    </body>
    </html>

图表可将没有日期数据的数据序列相乘

2 个答案: