javascript - Charts.js 烛台(金融图表)在开始和结束时显示一半的柱

Question

看了他们的documentation关于这方面的信息很少。

我基本上想在图表的开头和结尾显示一个完整的蜡烛图，而不是现有的半条柱(水平显示蜡烛条的一半)。我可以选择调整我的 JSON 数据并添加一个假金额，但如果我可以使用 charts.js 可能提供的现有选项来管理它，我更喜欢。

下面是显示图表的代码:

var candleCount = 60;
var data = getRandomData('April 01 2017', candleCount);

// Candlestick
var ctx = document.getElementById("chart1").getContext("2d");
ctx.canvas.width = 1000;
ctx.canvas.height = 250;
var candlestickChart = new Chart(ctx, {
    type: 'candlestick',
    data: {
        datasets: [{
            label: "CHRT - Chart.js Corporation",
            data: data
        }]
    }
});

// OHLC
var ctx2 = document.getElementById("chart2").getContext("2d");
ctx2.canvas.width = 1000;
ctx2.canvas.height = 250;
var ohlcChart = new Chart(ctx2, {
    type: 'ohlc',
    data: {
        datasets: [{
            label: "CHRTO - Chart.js Corporation, OHLC division",
            data: data
        }]
    }
});

var getRandomInt = function(max) {
    return Math.floor(Math.random() * Math.floor(max));
}

document.getElementById('randomizeData').addEventListener('click', function() {
    candlestickChart.data.datasets.forEach(function(dataset) {
        dataset.data = getRandomData('April 01 2017', candleCount + getRandomInt(10));
    });
    candlestickChart.update();

    ohlcChart.data.datasets.forEach(function(dataset) {
        dataset.data = getRandomData('April 01 2017', candleCount + getRandomInt(10));
    });
    ohlcChart.update();
});

非常感谢您的帮助。干杯

Answer 1

您可以在 x 轴的任一侧添加额外的标签

默认情况下，标签是从数据中提取的，
要覆盖，我们可以从数据中提取标签...

var candleCount = 60;
var data = getRandomData('April 01 2017', candleCount);

var xTicks = data.map(function (x) {
  return x.t;
});

然后在第一天之前和最后一天之后添加额外的一天......

var oneDay = (1000 * 60 * 60 * 24);
xTicks.unshift(xTicks[0] - oneDay);
xTicks.push(xTicks[xTicks.length - 1] + oneDay);

然后将新标签添加到图表选项...

new Chart(ctx, {
  type: 'candlestick',
  data: {
    labels: xTicks,
    datasets: [{
      label: "CHRT - Chart.js Corporation",
      data: data,
    }]
  },
});