在 chartjs 中使用对象

Question

我现在遇到的问题是我试图在我的 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

谢谢。

Answer 1

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

不妨试试这个：

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

然后对sellPriceData做同样的事情