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,
    }]
  },
});

Answer 2

在轴选项中，为时间轴添加偏移量：true。

new Chart(ctx, {
  type: 'candlestick',
  data: {
    labels: xTicks,
    datasets: [{
      label: "CHRT - Chart.js Corporation",
      data: data,
    }]
  },
  options: {
     scales: {
        xAxes: [{
           type: 'time',
           offset: true,
           distribution: 'series',
           ticks: {
              source: 'data'
           }
     }
  }
})

这被添加到财务图表的新默认值中。

Charts.js烛台（财务图表）在开头和结尾显示一半的柱形

2 个答案: