Javascript Highcharts.js问题：是否可以在图表的左侧和右侧添加仅在平移期间可见的空白区域？

我使用Highstock.js库开发了一个项目。我需要显示图表最左边和最右边的空白区域（假设x轴等于1天（86400000毫秒）），只有在平移到最左边或最右边时才可见（）。我不需要设置图表边距（）。 我试图通过将xAxis的“min”和“max”设置为：

xAxis: {
    min: ohlc[0].x - ONE_DAY_MS,
    max: ohlc[ohlc.length - 1].x + ONE_DAY_MS,
},

但那没用。 请告知是否有可能实施，以及如何实施。 谢谢

以下是示例的完整代码：

var ohlc = JSON.parse(ohlcStringified),
    volume = JSON.parse(volumeStringified);
var ONE_DAY_MS = 24 * 60 * 60 * 1000;

var chart = Highcharts.stockChart('container', {
    chart: {
        borderWidth: 1,
        panning: true,
    },
    title: {
        text: 'Chart'
    },
    legend: {
        enabled: true
    },
    rangeSelector: {
        selected: 1,
        enabled: false
    },

    navigator: {
        enabled: false,
        height: 0
    },

    scrollbar: {
        enabled: false
    },

    xAxis: {
        min: ohlc[0].x - ONE_DAY_MS,
        max: ohlc[ohlc.length - 1].x + ONE_DAY_MS,
    },
    yAxis: [{
        height: '60%'
    }, {
        top: '60%',
        height: '40%',
        offset: 0
    }],
    series: [{
        type: 'candlestick',
        id: 'candlestick',
        name: 'AAPL',
        data: ohlc,
        tooltip: {
            valueDecimals: 2
        },
        dataGrouping: {
            enabled: false,
        }
    }, {
        type: 'column',
        id: 'volume',
        name: 'Volume',
        data: volume,
        yAxis: 1,
        dataGrouping: {
            enabled: false,
        }
    }]
});

function chartZoomIn(chart) {
    var min = chart.xAxis[0].getExtremes().min;
    var max = chart.xAxis[0].getExtremes().max;

    var diff = max - min;
    var step = 0.05 * diff;
    var newMin = min + step;
    var newMax = max - step;

    chart.xAxis[0].setExtremes(newMin, newMax);
}

function chartZoomOut(chart) {
    var min = chart.xAxis[0].getExtremes().min;
    var max = chart.xAxis[0].getExtremes().max;
    var candlestickXData = chart.get('candlestick').xData;
    var zoomInMin = candlestickXData[0];
    var zoomInMax = candlestickXData[candlestickXData.length - 1];

    var diff = max - min;
    var step = 0.05 * diff ;
    var newMin = min - step;
    var newMax = max + step;

    if (newMin <= zoomInMin || newMax >= zoomInMax) {
        chart.zoomOut();
    } else {
        chart.xAxis[0].setExtremes(newMin, newMax);
    }
}
$('.zoom-in').click(function() {
    chartZoomIn(chart);
})
$('.zoom-out').click(function() {
    chartZoomOut(chart);
})
$('.full-zoom-out').click(function() {
    chart.zoomOut();
})

---

这里是现场演示：

要在绘图区域的左侧和右侧显示额外的空白空间，您可以使用

null

值添加点。查看下面发布的演示

代码：

var data = [
  [1542292200000, 191.41],
  [1542378600000, 193.53],
  [1542637800000, 185.86],
  [1542724200000, 176.98],
  [1542810600000, 176.78],
  [1542983400000, 172.29],
  [1543242600000, 174.62],
  [1543329000000, 174.24],
  [1543415400000, 180.94],
  [1543501800000, 179.55],
  [1543588200000, 178.58],
  [1543847400000, 184.82],
  [1543933800000, 176.69],
  [1544106600000, 174.72],
  [1544193000000, 168.49],
  [1544452200000, 169.6],
  [1544538600000, 168.63],
  [1544625000000, 169.1],
  [1544711400000, 170.95],
  [1544797800000, 165.48],
  [1545057000000, 163.94],
  [1545143400000, 166.07],
  [1545229800000, 160.89],
  [1545316200000, 156.83],
  [1545402600000, 150.73],
  [1545661800000, 146.83],
  [1545834600000, 157.17]
];

for (var i = 0; i < 5; i++) {
  data.unshift([
    data[0][0] - 24 * 60 * 60 * 1000,
    null
  ]);

  data.push([
    data[data.length - 1][0] + 24 * 60 * 60 * 1000,
    null
  ]);
}

console.log(data);
Highcharts.stockChart('container', {
  rangeSelector: {
    selected: 0
  },
  title: {
    text: 'AAPL Stock Price'
  },
  series: [{
    name: 'AAPL',
    data: data,
    tooltip: {
      valueDecimals: 2
    }
  }]
});

var数据=[
[1542292200000, 191.41],
[1542378600000, 193.53],
[1542637800000, 185.86],
[1542724200000, 176.98],
[1542810600000, 176.78],
[1542983400000, 172.29],
[1543242600000, 174.62],
[1543329000000, 174.24],
[1543415400000, 180.94],
[1543501800000, 179.55],
[1543588200000, 178.58],
[1543847400000, 184.82],
[1543933800000, 176.69],
[1544106600000, 174.72],
[1544193000000, 168.49],
[1544452200000, 169.6],
[1544538600000, 168.63],
[1544625000000, 169.1],
[1544711400000, 170.95],
[1544797800000, 165.48],
[1545057000000, 163.94],
[1545143400000, 166.07],
[1545229800000, 160.89],
[1545316200000, 156.83],
[1545402600000, 150.73],
[1545661800000, 146.83],
[1545834600000, 157.17]
];
对于（变量i=0；i<5；i++）{
data.unshift([
数据[0][0]-24*60*60*1000，
无效的
]);
数据推送([
数据[data.length-1][0]+24*60*60*1000，
无效的
]);
}
控制台日志（数据）；
Highcharts.stockChart（‘容器’{
范围选择器：{
已选：0
},
标题：{
文本：“AAPL股价”
},
系列：[{
名称：“AAPL”，
数据：数据，
工具提示：{
数值小数：2
}
}]
});

演示：

---

对于此图表没有显示指示器的情况，这是正确的解决方案。但在我的例子中，我有一些指标应该显示在图表中。以下是显示“空图表点”并显示SMA和MACD指示器的实时示例：。在这种情况下，SMA和MACD指示器的绘制考虑了不正确的空图表点。你知道有没有办法让指标（在这种情况下是SMA和MACD）不考虑空图表点？谢谢在这种情况下，只能添加另一个具有空点的序列。检查此演示：。

var data = [
  [1542292200000, 191.41],
  [1542378600000, 193.53],
  [1542637800000, 185.86],
  [1542724200000, 176.98],
  [1542810600000, 176.78],
  [1542983400000, 172.29],
  [1543242600000, 174.62],
  [1543329000000, 174.24],
  [1543415400000, 180.94],
  [1543501800000, 179.55],
  [1543588200000, 178.58],
  [1543847400000, 184.82],
  [1543933800000, 176.69],
  [1544106600000, 174.72],
  [1544193000000, 168.49],
  [1544452200000, 169.6],
  [1544538600000, 168.63],
  [1544625000000, 169.1],
  [1544711400000, 170.95],
  [1544797800000, 165.48],
  [1545057000000, 163.94],
  [1545143400000, 166.07],
  [1545229800000, 160.89],
  [1545316200000, 156.83],
  [1545402600000, 150.73],
  [1545661800000, 146.83],
  [1545834600000, 157.17]
];

for (var i = 0; i < 5; i++) {
  data.unshift([
    data[0][0] - 24 * 60 * 60 * 1000,
    null
  ]);

  data.push([
    data[data.length - 1][0] + 24 * 60 * 60 * 1000,
    null
  ]);
}

console.log(data);
Highcharts.stockChart('container', {
  rangeSelector: {
    selected: 0
  },
  title: {
    text: 'AAPL Stock Price'
  },
  series: [{
    name: 'AAPL',
    data: data,
    tooltip: {
      valueDecimals: 2
    }
  }]
});