从JSON数组填充Chart.js OHLC财务图表的问题(Django模型的Ajax调用)

Question

有人成功地从JSON数组动态创建了Chart.js OHLC财务图表吗？在本例中，我使用Ajax调用从Django模型导入数据：

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js" integrity="sha512-ElRFoEQdI5Ht6kZvyzXhYG9NqjtkmlkfYk0wr6wHxU9JEHakS7UJZNeml5ALk+8IKlU6jDgMabC3vkumRokgJA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<script src="..staticstocksjschart.js" type="text/javascript"></script>
<canvas id="myChart" width="300" height="175"></canvas>
<script>
let priceArray = []
const endpoint2 = '/api/stockArray/'
$.ajax({
method: 'GET',
url: endpoint2,
success: function(stockArray){
priceArray = stockArray
setChart(priceArray)
}
})
function setChart() {
let testClose = priceArray.map(e => e.data_close)
let testLabels = priceArray.map(e => new Date(e.data_date).setHours(0, 0, 0, 0))
let testOpen = priceArray.map(e => e.data_open)
let testHigh = priceArray.map(e => e.low)
let testLow = priceArray.map(e => e.high)

const data = {
labels: [],
datasets: [{
type: 'ohlc',
label: 'Stocks',
backgroundColor: '#ffffff',
borderColor: '#000000',
data: [
{
x: testLabels,
o: testOpen,
h: testHigh,
l: testLow,
c: testClose,
}
]
}]
}
const config = {
data,
options: {
scales: {
x: {
type: 'timeseries',
time: {
unit: 'day'
}
},
y: {
beginAtZero: true,
max: 3
}
}
}
};
new Chart(
document.getElementById('myChart'),
config
);
}
</script>

我已经学习了本教程(https://www.youtube.com/watch?v=Mzt7IOKnhDw)并成功创建了静态OHLC图表。我还成功地从同一数组中动态填充了Chart.js折线图和条形图。在OHLC图表的情况下，我一直从chartjs-adapter-date-fns.bundle中得到一个时间值无效的RangeError。我已经尝试了三种从数组中的日期值(存储为testLabels(填充x刻度的方法：

let testLabels = priceArray.map(e => new Date(e.data_date).setHours(0, 0, 0, 0))
let testLabels2 = priceArray.map(e => new Date(e.data_date))
let testLabels3 = priceArray.map(e => e.data_date)

每次都有相同的错误。如果我记录这些，值显示为

1. testLabels=[15032840000，1450846800000…]
2. testLabels2=[星期四2015年12月17日19:00:00 GMT-0500(东部标准时间(，12月23日星期三2015年19:00:00 GMT-0500(东部标准时间(…]
3. 测试标签3=〔‘2015-12-18’，‘2015-12-24’…〕

我将再添加一个让我感到困惑的警告。如果你用静态值填充图表，这段代码可以工作：

data: [
{
x: new Date ('2022-08-10').setHours(0, 0, 0, 0),
o: 1.00,
h: 1.35,
l: 0.90,
c: 1.20,
},
{
x: new Date ('2022-08-11').setHours(0, 0, 0, 0),
o: 1.00,
h: 1.35,
l: 0.90,
c: 1.20,
}
]

但是，如果只传递一个对象，则图表显示为空白：

data: [
{
x: new Date ('2022-08-10').setHours(0, 0, 0, 0),
o: 1.00,
h: 1.35,
l: 0.90,
c: 1.20,
}]

这让我觉得这并不完全是轴线的日期/时间问题。教程一个月前才发布，所以这个插件可能还需要一些开发。我很乐意探索其他js库，但这正是我想要的图表样式。很乐意提供任何其他信息。提前谢谢。

Answer 1

将其标记为已回答。我选择了canvasjs，因为我更喜欢图表选项。但是，正如我所说，在填充图表之前，您必须将每个数据点推到数组的末尾，如图所示(样条曲线而不是OHLC，但原理相同(：

window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", { 
title: {
text: "Adding & Updating dataPoints"
},
data: [
{
type: "spline",
dataPoints: [
{ y: 10 },
{ y:  4 },
{ y: 18 },
{ y:  8 }   
]
}
]
});
chart.render(); 
$("#addDataPoint").click(function () {
var length = chart.options.data[0].dataPoints.length;
chart.options.title.text = "New DataPoint Added at the end";
chart.options.data[0].dataPoints.push({ y: 25 - Math.random() * 10});
chart.render();