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

Question

<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 年会有与整个图表成比例的空space？

Answer 1

你要的是ordinal.

In an ordinal axis, the points are equally spaced in the chart regardless of the actual time or x distance between them. This means that missing data for nights or weekends will not take up space in the chart.

将 ordinal 设置为 false，就像这样，将为您提供所需的差距：

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

您的代码还有一些其他问题，如果您在控制台中查看，则会收到错误 15，其中指出 highcharts 需要对数据进行排序。你得到这个是因为你如何将系列数据添加到你的 MSFT 系列。您将 x 和 y 添加到单个一维数组，这意味着 highcharts 尝试在 x 轴上绘制 x 和 y 值。

我做了一个解决方法，在这个fiddle中给出了正确的格式：http://jsfiddle.net/2cps91ka/91/

Answer 2

第一个答案的评论部分的讨论表明，OP 仅在某些情况下希望隐藏 no-data 个句点。

这里的解决方案可能是将ordinal设置为false（如@ewolden）建议和使用 breaks 代替：

  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 月之间保持 space。

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

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

How do I add a real gap in high stocks so it would be visible on the chart?

highcharts

highstock

jstockchart