代码之家  ›  专栏  ›  技术社区  ›  valk

我如何在高库存中添加一个真正的缺口,以便在图表上可见?

  •  0
  • valk  · 技术社区  · 7 年前

    我有 this chart

    <script src="http://code.highcharts.com/highcharts.js"></script>
    <div id="container" style="height: 300px"></div>
    
    var seriesOptions = [],
        seriesCounter = 0,
        names = ['MSFT', 'AAPL', 'GOOG'];
    
    /**
     * Create the chart when all data is loaded
     * @returns {undefined}
     */
    function createChart() {
    
        Highcharts.stockChart('container', {
    
           plotOptions: {
                series: {
                    gapSize: 5 * 24 * 3600 * 1000,
                    gapUnit: 'relative'
                }
            },
    
            rangeSelector: {
                selected: 5
            },
    
            yAxis: {
                labels: {
                    formatter: function () {
                        return (this.value > 0 ? ' + ' : '') + this.value + '%';
                    }
                },
                plotLines: [{
                    value: 0,
                    width: 2,
                    color: 'silver'
                }]
            },
    
            plotOptions: {
                series: {
                    compare: 'percent',
                    showInNavigator: true
                }
            },
    
            tooltip: {
                pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
                valueDecimals: 2,
                split: true
            },
    
            series: seriesOptions
        });
    }
    
    $.each(names, function (i, name) {
    
        $.getJSON('https://www.highcharts.com/samples/data/' + name.toLowerCase() + '-c.json',    function (data) {
    
            if (i==0) {
                var first = [], last = [];
                first.push.apply(first, data.slice(0,1)[0]);
                last.push.apply(first, data.slice(0,1)[0]);
                first[0] = first[0] - 1900 * 24 * 3600 * 1000;
                last[0] =   last[0] - 130 * 24 * 3600 * 1000;
                data = [];
                data.push(first);
                data.push(last);
            }
            seriesOptions[i] = {
                name: name,
                data: data
            };
    
            // As we're loading the data asynchronously, we don't know what order it will arrive. So
            // we keep a counter and create the chart when all the data is loaded.
            seriesCounter += 1;
    
            if (seriesCounter === names.length) {
                createChart();
            }
        });
    });
    

    正如你所看到的,这里有三只股票。如果你用鼠标悬停图表并转到开头,你会注意到MSFT股票只有2个点,这是有意的。MSFT之后应该会有6年左右的差距,但在图表上显示的是几个像素。

    如何配置stockChart以显示实际差距?换言之,我想看到6年的差距,那么从2005年到2011年,将有与整个图表成比例的空白空间?

    2 回复  |  直到 7 年前
        1
  •  1
  •   Kamil Kulig    7 年前

    第一个答案评论部分的讨论表明,OP只在某些情况下想隐藏无数据周期。

    这个 解决方案 这里可能要设置 ordinal false (作为 @埃沃尔登 )建议和使用 打破 而是:

      xAxis: {
          breaks: [{
          breakSize: 24 * 3600 * 1000,
          from: Date.UTC(2017, 0, 6),
          to: Date.UTC(2017, 0, 9)
        }],
        ordinal: false
      },
    
      series: [{
        data: [
          [Date.UTC(2017, 0, 2), 6],
          [Date.UTC(2017, 0, 3), 7],
          [Date.UTC(2017, 0, 4), 3],
          [Date.UTC(2017, 0, 5), 4],
          [Date.UTC(2017, 0, 6), 1],
          [Date.UTC(2017, 0, 9), 8],
          [Date.UTC(2017, 0, 10), 9],
          [Date.UTC(2017, 6, 1), 4],
          [Date.UTC(2017, 6, 2), 5]
        ]
    

    例子: http://jsfiddle.net/BlackLabel/ocg0dujg/

    在上面的演示中,我能够隐藏周末(1月7日和8日),并保持1月和7月之间的空间。

    API参考: https://api.highcharts.com/highstock/xAxis.breaks

        2
  •  1
  •   ewolden    7 年前

    你想要的是 ordinal .

    在序数轴中,点在图表中的间距相等,而与它们之间的实际时间或x距离无关。这意味着丢失的夜间或周末数据将不会占用图表中的空间。

    将ordinal设置为false,如下所示,将获得所需的间距:

    xAxis: {
      type: 'datetime',
      ordinal: false,
    },
    

    您的代码还有一些其他问题,如果您在控制台中查看,您将看到错误15,其中指出highcharts需要对数据进行排序。之所以会出现这种情况,是因为您如何将序列数据添加到 MSFT 系列您将 x 以及 y 对于单个1D数组,这意味着highcharts会尝试在x轴上绘制x和y值。

    我做了一个变通方法,在这个小提琴中为它提供了正确的格式: http://jsfiddle.net/2cps91ka/91/

    推荐文章