使用chartjs中的对象



我现在遇到的问题是,我试图在"数据";我的Chartjs脚本的字段。这是我下面的代码:

<canvas id="QGL_Chart"></canvas>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<script>
var interval = window.onload = () => { 
var selectedDate;   
const buyPriceData = [];
const buyVolData = [];
const sellPriceData = [];
const sellVolData = [];

var ctx = document.getElementById("QGL_Chart").getContext('2d');
ctx.canvas.width = 934;
ctx.canvas.height = 400;
var myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: 'Line A',

data: [{
x: 90,
y: 90
}, {
x: 20,
y: 96

}, {
x: 15,
y: 97

}]
},
{
label: 'Line B',

data: [{
x: 10,
y: 96

}, {
x: 20,
y: 95.8

}, {
x: 100,
y: 99

}]
}
]
},


options: {
title: {
display: true,
text: 'Equilibrum Graph',
fontSize: 18
},
legend: {
display: true,
position: "bottom"
},
scales: {
xAxes: [{

ticks: {
reverse: false,
// stepSize: 6,
min: 0
}
}]
}
}
});

function refreshCurveData () {
selectedDate = document.querySelectorAll(".buyclass .column-date.sorting_1")[1].textContent;
buyPriceTable = document.querySelectorAll(".buyclass td.column-price");
buyVolTable = document.querySelectorAll(".buyclass td.column-volume");
sellPriceTable = document.querySelectorAll(".sellclass td.column-price");
sellVolTable = document.querySelectorAll(".sellclass td.column-volume");
let i = 0;
do {
var  buyPriceData1 = buyPriceTable[i].textContent;
var buyVolData1 = buyVolTable[i].textContent;
var sellPriceData1 = sellPriceTable[i].textContent;
var sellVolData1 = sellVolTable[i].textContent;
buyPriceData[i] = `{x: ${buyPriceData1}, y: ${buyVolData1}}`
sellPriceData[i] = `{x: ${sellPriceData1}, y: ${sellVolData1}}`
//buyPriceData[i] = buyPriceData[i].replace(/"/g, "");
//sellPriceData[i] = sellPriceData[i].replace(/"/g, "");
// buyPriceData.push ({ x: buyPriceData1, y: buyVolData1 });
// sellPriceData.push ({ x: sellPriceData1, y: sellVolData1 });
i++;
}
while ( document.querySelectorAll(".column-date.sorting_1")[i].textContent == selectedDate && i < 9);
}
setInterval(() => {

refreshCurveData();
myChart.update();

},2500);
};
</script>

当我把";数据";字段分别带有buyPriceData和sellPriceData,图形没有可视化,我也尝试过这样做:

data: {
datasets: [{
label: 'Line A',

data: Object.values(buyPriceData)
},
{
label: 'Line B',

data: Object.values(sellPriceData)
}
]
},

但我仍然有同样的问题,请有人帮我解决这个问题吗?

我在这里创建了一支钢笔:https://codepen.io/scottfranc/pen/BaLGwZK

谢谢。

看起来您正在buyPriceData中保存一个字符串。它看起来应该是一个对象

也许试试这个:

buyPriceData[i] = { x: buyPriceData1, y: buyVolData1 };

然后对sellPriceData执行相同操作

相关内容

  • 没有找到相关文章

最新更新