2016-04-12 27 views
0

Sunucunun bir listesi ile önceden doldurulmuş bir açılırız. Birini seçip formu gönderdiğimde, mysql db'den son 12 değerdeki cpu yük ort değerini alabilirim. o olurChartjs satır grafiğini güncelleştirmek

<div> 
    <canvas id="cpuload" width="500" height="300"></canvas> 
</div> 

<script> 

    $(function() { 

     var cpudata = { 

      labels: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7", "t8", "t9", "t10", "t11"], 
      datasets: [{ 

       fillColor : "rgba(3, 169, 244, 0.4)", 
       strokeColor : "rgba(3, 169, 244, 1)", 
       pointColor : "rgba(3, 169, 244, 1)", 
       pointStrokeColor : "#fff", 
       data : [6,2,5,7,9,25,12,5,6,7,17,9] 

      }] 
     } 

     var ctx = $("#cpuload").get(0).getContext("2d"); 
     var myChart = new Chart(ctx).Line(cpudata, { 
      bezierCurve: false 
     }); 


    }); 

Ben Chartjs belgelerine baktım ve bir .update() işlevini fark ettik:

bu verileri kullanarak, aşağıdaki basit çizgi grafiği güncellemek istediğiniz sadece y değerlerini güncellemeye izin ver.

Sonuç_dizisi değerlerine (foreach döngüsünde bir şekilde mi?) Erişmek ve myChart.datasets [0] .points [i] .değerlerinin her birine atamak için en iyi yolu bulmaya çalışıyorum. (i = 0-11 nerede) ve daha sonra update() öğesini çalıştırarak grafik yeni değerler oluşturur?

Rehberlik takdir edildi, teşekkürler!

cevap

0

Daha yalındır çözeltisi (bana en azından): En draw_chart yöntemde

(veya grafiği çizmek için aradığınız her ne ise): eğer mevcut bir grafiği yok

if (typeof chart != 'undefined') 
    chart.destroy(); 

orada biridir.

Buradan, veri kümelerinizi ekleyin ve çizin.

Bu çözüm, hem 1.x hem de 2.0'da iyi çalışır.

İlgili konular