Question

我有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();
        }
    });
});

正如您所看到的，显示了三种股票。如果您用鼠标悬停图表并转到开头，您会注意到只有2点且有意的MSFT股票。在MSFT之后应该有大约6年的差距，但是在图表上它以几个像素显示。

如何配置stockChart以显示真正的差距？换句话说，我希望看到6年的差距，从2005年到2011年，将有整个图表成比例的空白区域？

Answer 1

你所追求的是ordinal。

在序数轴中，无论实际时间或它们之间的x距离如何，这些点在图表中都是等距的。这意味着缺少夜晚或周末的数据不会占用图表中的空间。

将序数设置为false，就像这样，会给你带来的差距：

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

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

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

Answer 2

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

此处的解决方案可能是将ordinal设置为false（如 @ewolden ）建议并使用中断相反：

  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 个答案: