วิธีป้อนข้อมูลไปยัง ChartJS อย่างถูกต้องด้วยจำนวนจุด x (ป้ายกำกับ) และ y (ข้อมูล) ที่แตกต่างกัน

ฉันมีชุดข้อมูลที่มีข้อมูลประมาณนี้

var data =[10,30,20,50,80,60,120,40,20,90,30,10];
var labels = [moment("12:00:00", 'HH:mm:ss'),moment("12:00:01", 'HH:mm:ss'),moment("12:00:02", 'HH:mm:ss'),moment("12:00:03", 'HH:mm:ss')]; 

ฉันป้อนข้อมูลไปที่ ChartJS เช่นนี้

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
   type: 'line',
   data: {
      labels: labels,
      datasets: [{
         label: 'Voltage Fluctuation',
         data: [10,20,30,40,50],
         borderWidth: 1
      }]
   },
   options: {
      scales: {
         xAxes: [{
            type: 'time',
            time: {
               unit: 'minute',
               displayFormats: {
                  hour: 'HH:mm:ss'
               }
            }
         }]
      },
   }
});

อย่างไรก็ตาม ฉันได้รับข้อมูลเฉพาะสี่จุดแรกเท่านั้น เช่น สำหรับแต่ละป้ายกำกับ

นี่คือ JSFiddle

ฉันต้องการให้กระจายข้อมูลสำหรับป้ายกำกับทั้งหมด ในกรณีนี้คือจุดข้อมูลหนึ่งจุดสำหรับทุก (4/12) วินาที และปรับกราฟตามนั้น

มีวิธีใดที่เป็นไปได้ที่ฉันสามารถบรรลุสิ่งนั้นโดยไม่ต้องฮาร์ดโค้ดโดยการแปลงป้ายกำกับเป็นรูปแบบมิลลิวินาทีหรือไม่


person Saikiran    schedule 23.10.2017    source แหล่งที่มา
comment
ดังนั้นแต่ละจุดต้องมีป้ายกำกับ คุณได้รับเพียงสี่แต้มเนื่องจากคุณป้อนป้ายกำกับเพียงสี่ป้ายกำกับ คุณต้องคำนวณค่าของคุณใหม่ตามความต้องการของคุณ เพื่อให้จำนวนคะแนนเท่ากับจำนวนป้ายกำกับ   -  person Michael P    schedule 30.10.2017
comment
ใช่ ฉันปรับระยะเวลาเพื่อให้พอดีกับขนาดของข้อมูลในตอนนี้ อยากทราบทางเลือกอื่นถ้ามีอยู่   -  person Saikiran    schedule 30.10.2017


คำตอบ (1)


ฉันไปข้างหน้าและฮาร์ดโค้ดทั้งหมดโดยสับวินาทีเป็นมิลลิวินาทีเพื่อสร้างอาร์เรย์ที่มีความยาวเท่ากัน

person Saikiran    schedule 11.11.2017