0

我有这张图表

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

4

2 回答 2

1

你所追求的是ordinal。

在序数轴中，这些点在图表中等距分布，而不管它们之间的实际时间或 x 距离如何。这意味着晚上或周末的缺失数据不会占用图表中的空间。

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

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

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

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

于 2018-02-28T11:02:00.693 回答
1

第一个答案的评论部分中的讨论表明，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

于 2018-03-01T12:38:23.993 回答