chart.js tamamen yeni veriler yükler

APIchart.js , bir kişinin kendisine yüklenen veri kümelerinin noktalarını düzenlemesine izin verir, örneğin:

.update( )

Grafik örneğinizde update () 'i çağırmak, grafiği herhangi bir güncellenmiş değerle yeniden oluşturarak birden çok mevcut noktanın değerini düzenlemenize ve ardından bunları bir animasyonlu oluşturma döngüsünde oluşturmanıza olanak tanır.

.addData( valuesArray, label )

Chart örneğinizde addData (valuesArray, label) 'i çağırarak her veri kümesi için bir değer dizisi geçirerek bu noktalar için bir etiket iletin.

.removeData( )

Grafik örneğinizde removeData () 'nın çağrılması, grafikteki tüm veri kümeleri için ilk değeri kaldırır.

Bunların hepsi harika, ancak tamamen yeni bir veri kümesini eski verileri silerek nasıl yükleyeceğimi çözemiyorum. Belgeler bunu kapsamıyor gibi görünüyor.

Bununla büyük sorunlarım vardı

Önce denedim .clear()sonra denedim .destroy()ve grafik referansımı null olarak ayarlamayı denedim

Sonunda benim için sorunu <canvas>çözen şey: öğeyi silmek ve ardından <canvas>üst kapsayıcıya yeni bir tane eklemek

Bunu yapmanın milyonlarca yolu var:

var resetCanvas = function () {
  $('#results-graph').remove(); // this is my <canvas> element
  $('#graph-container').append('<canvas id="results-graph"><canvas>');
  canvas = document.querySelector('#results-graph'); // why use jQuery?
  ctx = canvas.getContext('2d');
  ctx.canvas.width = $('#graph').width(); // resize to parent width
  ctx.canvas.height = $('#graph').height(); // resize to parent height

  var x = canvas.width/2;
  var y = canvas.height/2;
  ctx.font = '10pt Verdana';
  ctx.textAlign = 'center';
  ctx.fillText('This text is centered on the canvas', x, y);
};

İmha etmen gerekiyor:

myLineChart.destroy();

Ardından grafiği yeniden başlatın:

var ctx = document.getElementById("myChartLine").getContext("2d");
myLineChart = new Chart(ctx).Line(data, options);

Chart.js V2.0 ile şunları yapabilirsiniz:

websiteChart.config.data = some_new_data;
websiteChart.update();

Bu eski bir iş parçacığıdır, ancak mevcut sürümde (1 Şubat 2017 itibarıyla), chart.js'de çizilen veri kümelerini değiştirmek kolaydır:

yeni x ekseni değerlerinin x dizisinde ve y ekseni değerlerinin y dizisinde olduğunu varsayalım, grafiği güncellemek için aşağıdaki kodu kullanabilirsiniz.

var x = [1,2,3];
var y = [1,1,1];

chart.data.datasets[0].data = y;
chart.data.labels = x;

chart.update();

ChartJS 2.6 destekler verileri, referans olarak yerine (bakınız Not Güncelleme (geneli) belgelerinde). Yani Grafiğinize sahip olduğunuzda, temelde şunu yapabilirsiniz:

myChart.data.labels = ['1am', '2am', '3am', '4am'];
myChart.data.datasets[0].data = [0, 12, 35, 36];
myChart.update();

Nokta ekleyerek elde edeceğiniz animasyonu yapmaz, ancak grafikteki mevcut noktalar canlandırılır.

Buna çözümüm oldukça basit. (SÜRÜM 1.X)

getDataSet:function(valuesArr1,valuesArr2){
        var dataset = [];
        var arr1 = {
            label: " (myvalues1)",
            fillColor: "rgba(0, 138, 212,0.5)",
            strokeColor: "rgba(220,220,220,0.8)",
            highlightFill: "rgba(0, 138, 212,0.75)",
            highlightStroke: "rgba(220,220,220,1)",
            data: valuesArr1
        };
        var arr2 = {
            label: " (myvalues2)",
            fillColor: "rgba(255, 174, 087,0.5)",
            strokeColor: "rgba(220,220,220,0.8)",
            highlightFill: "rgba(255, 174, 087,0.75)",
            highlightStroke: "rgba(220,220,220,1)",
            data: valuesArr2
        };
        /*Example conditions*/
        if(condition 1)
          dataset.push(arr1);
        }
        if(condition 2){
          dataset.push(arr1);
          dataset.push(arr2);
        }

        return dataset;
    }

var data = {
    labels: mylabelone,
    datasets: getDataSet()
};
if(myBarChart != null) // i initialize myBarChart var with null
    myBarChart.destroy(); // if not null call destroy
    myBarChart = new Chart(ctxmini).Bar(data, options);//render it again ...

Titreme veya sorun yok. getDataSethangi veri kümesini sunmam gerektiğini kontrol eden bir işlev

Bunu burada yanıtladım , üzerine gelme olaylarının tetiklenememesi için tuvalden bir grafik nasıl temizlenir? Konusuna bakın.

Ama işte çözüm:

var myPieChart=null;

function drawChart(objChart,data){
    if(myPieChart!=null){
        myPieChart.destroy();
    }
    // Get the context of the canvas element we want to select
    var ctx = objChart.getContext("2d");
    myPieChart = new Chart(ctx).Pie(data, {animateScale: true});
}

Dokümanlara göre clear()tuvali temizler. Paint'teki Silgi aracı olarak düşünün. Grafik örneğinde şu anda yüklü olan verilerle ilgisi yoktur.

Örneği yok etmek ve yeni bir tane oluşturmak israftır. Bunun yerine, API yöntemlerini removeData()ve addData(). Bunlar, grafik örneğine / örneğinden tek bir segment ekleyecek / kaldıracaktır. Bu nedenle, tamamen yeni veriler yüklemek istiyorsanız, sadece bir grafik veri dizisini döngüleyin ve çağırın removeData(index)(dizi dizinleri, geçerli segment dizinlerine karşılık gelmelidir). Ardından, addData(index)yeni verilerle doldurmak için kullanın . Tek bir segment indeksi beklediklerinden, verileri döngüye sokmak için iki yöntemi sarmayı öneririm. Kullandığım resetChartve updateChart. Devam etmeden önce, Chart.jsen son sürümü ve belgeleri kontrol ettiğinizden emin olun . Verileri tamamen değiştirmek için yeni yöntemler eklemiş olabilirler .

Aynı sorunla karşılaştım, bir sayfada hepsi aynı anda güncellenebilen 6 pasta grafiğim var. Grafik verilerini sıfırlamak için aşağıdaki işlevi kullanıyorum.

// sets chart segment data for previously rendered charts
function _resetChartData(chart, new_segments) {
    // remove all the segments
    while (chart.segments.length) {
        chart.removeData();
    };

    // add the new data fresh
    new_segments.forEach (function (segment, index) {
        chart.addData(segment, index);
    });
};

// when I want to reset my data I call
_resetChartData(some_chart, new_data_segments);
some_chart.update();

Neaumusic çözümü denedim , ancak daha sonra yok etmenin tek sorununun kapsam olduğunu öğrendim .

var chart;

function renderGraph() {
    // Destroy old graph
    if (chart) {
        chart.destroy();
    }

    // Render chart
    chart = new Chart(
        document.getElementById(idChartMainWrapperCanvas),
        chartOptions
    );
}

Grafik değişkenimi fonksiyon kapsamının dışına taşımak, benim için çalışmasını sağladı.

Yukarıdaki cevapların hiçbiri, özel durumuma minimum kodla çok temiz bir şekilde yardımcı olmadı. Tüm veri kümelerini kaldırmam ve birkaç veri kümesini dinamik olarak eklemek için döngüye ihtiyacım vardı. Yani bu alıntı, cevabını bulmadan sayfanın sonuna kadar ulaşanlar içindir :)

Not: Tüm yeni verilerinizi veri kümesi nesnesine yükledikten sonra chart.update () öğesini çağırdığınızdan emin olun. Umarım bu birine yardımcı olur

function removeData(chart) {
   chart.data.datasets.length = 0;
}

function addData(chart, data) {
  chart.data.datasets.push(data);
}

Eski verileri temizlemeniz gerekiyor. Yeniden başlatmaya gerek yok:

for (i in myChartLine.datasets[0].points)
    myChartLine.removeData();

React'te bunun nasıl yapılacağını arayan varsa. Çizgi grafik için, grafiğin etrafında bir sarmalayıcı bileşeniniz olduğunu varsayarsak:

(Bu, v2 kullandığınızı varsayar. Kullanmanıza gerek yoktur react-chartjs. Bu, chart.jsnpm'deki normal paketi kullanıyor.)

propTypes: {
  data: React.PropTypes.shape({
    datasets: React.PropTypes.arrayOf(
      React.PropTypes.shape({

      })
    ),
    labels: React.PropTypes.array.isRequired
  }).isRequired
},
componentDidMount () {
  let chartCanvas = this.refs.chart;

  let myChart = new Chart(chartCanvas, {
    type: 'line',
    data: this.props.data,
    options: {
      ...
    }
  });

  this.setState({chart: myChart});
},
componentDidUpdate () {
    let chart = this.state.chart;
    let data = this.props.data;

    data.datasets.forEach((dataset, i) => chart.data.datasets[i].data = dataset.data);

    chart.data.labels = data.labels;
    chart.update();
},
render () {
  return (
    <canvas ref={'chart'} height={'400'} width={'600'}></canvas>
  );
}

componentDidUpdateİşlevselliği güncelleme, eklenti yapmanız ya gelen tüm verileri kaldırmasını this.props.data.

Tabloyu yok etmek gerekli değildir. Bununla dene

function removeData(chart) {

        let total = chart.data.labels.length;

        while (total >= 0) {
            chart.data.labels.pop();
            chart.data.datasets[0].data.pop();
            total--;
        }

        chart.update();
    }

Lütfen Chart.js'nin (burada sürüm 2) nasıl çalıştığını öğrenin ve bunu istediğiniz özellik için yapın:

<canvas id="your-chart-id" height="your-height" width="your-width"></canvas>

2. Lütfen grafiğinizi ilk kez dolduran bir javascript kodunuz olduğunu varsayalım (örneğin, sayfa yüklendiğinde):

var ctx = document.getElementById('your-chart-id').getContext('2d');
var chartInstance = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: your-lables-array,
        datasets: [{
            data: your-data-array,
            /*you can create random colors dynamically by ColorHash library [https://github.com/zenozeng/color-hash]*/
            backgroundColor: your-lables-array.map(function (item) {
                return colorHash.hex(item);
            })
        }]
    },
    options: {
        maintainAspectRatio: false,
        scales: {
            yAxes: [ { ticks: {beginAtZero: true} } ]
        },
        title: {display: true, fontSize: 16, text: 'chart title'},
        legend: {display: false}
    }
});

Lütfen veri kümenizi tam olarak güncellemek istediğinizi varsayalım. O çok basit. Lütfen yukarıdaki koda bakın ve grafik değişkeninizden verilere giden yolun nasıl olduğunu görün ve ardından aşağıdaki yolu izleyin:

• chartInstancevar seçin .
• Sonra seçmek data nodeiçeride chartInstance.
• Sonra seçmek datasets nodeiçeride data node.
  (not: Gördüğünüz gibi, bu datasets nodebir dizidir. Bu nedenle, bu dizinin hangi elemanını istediğinizi belirtmelisiniz. Burada içinde sadece bir elemanımız var datasets node.datasets[0]
• Öyleyse seçin datasets[0]
• Ardından seçmek data nodede içini datasets[0].

Bu adımlar size verir chartInstance.data.datasets[0].datave yeni veriler ayarlayabilir ve grafiği güncelleyebilirsiniz:

chartInstance.data.datasets[0].data = NEW-your-data-array
//finally update chart var:
chartInstance.update();

Şimdiye kadar kendim için bulabildiğim tek çözüm, grafiği sıfırdan yeniden başlatmaktır:

var myLineChart = new Chart(ctx).Line(data, options);

Ancak bu bana biraz komik geliyor. Daha iyi, daha standart bir çözüm var mı?

Bununla da bir sürü sorunum oldu. Ayrı dizilerde veri ve etiketlerim var, ardından grafik verilerini yeniden başlatıyorum. Line.destroy () 'u ekledim; yukarıda önerildiği gibi hile yapan

var ctx = document.getElementById("canvas").getContext("2d");
if(window.myLine){
	window.myLine.destroy();
}
window.myLine = new Chart(ctx).Line(lineChartData, {
  etc
  etc

Orada olduğunu tuval temizleyerek veya üzerinde başlatmadan bunu yapmanın bir yolu, ancak veri güncelleme yaptığınızda aynı formatta olmasını sağlayacak şekilde adam koluna grafiğin oluşturulmasını var.

İşte böyle yaptım.

    var ctx = document.getElementById("myChart").getContext("2d");
    if (chartExists) {
        for (i=0;i<10;i++){
            myNewChart.scale.xLabels[i]=dbLabels[i]; 
            myNewChart.datasets[0].bars[i].value=dbOnAir[i];
        }
        myNewChart.update();
      }else{
          console.log('chart doesnt exist');
          myNewChart = new Chart(ctx).Bar(dataNew);
          myNewChart.removeData();
          for (i=0;i<10;i++){
              myNewChart.addData([10],dbLabels[i]);
          }
          for (i=0;i<10;i++){      
              myNewChart.datasets[0].bars[i].value=dbOnAir[i];
          }
          myNewChart.update();
          chartExists=true;
        }

Oluşturma sırasında yüklenen verileri temelde hurdaya çıkarıyorum ve ardından veri ekle yöntemiyle yeniden biçimlendiriyorum. Bu, daha sonra tüm noktalara erişebileceğim anlamına gelir. Ne zaman tarafından oluşturulan veri yapısına erişmeye çalışsam:

Chart(ctx).Bar(dataNew);

komut, ihtiyacım olan şeye erişemiyorum. Bu, tüm veri noktalarını, onları oluşturduğunuz şekilde değiştirebileceğiniz ve ayrıca tamamen sıfırdan canlandırmadan update () 'i çağırabileceğiniz anlamına gelir.

Grafik JS 2.0

Sadece chart.data.labels = [];

Örneğin:

function addData(chart, label, data) {
    chart.data.labels.push(label);
    chart.data.datasets.forEach((dataset) => {
       dataset.data.push(data);
    });
    chart.update();
}

$chart.data.labels = [];

$.each(res.grouped, function(i,o) {
   addData($chart, o.age, o.count);
});
$chart.update();

Grafik nesnesini oluştururken örneği bir değişkene kaydetmeniz gerekir.

var currentChart = new Chart(ctx, ...);

Ve yeni verileri yüklemeden önce, onları imha etmeniz gerekir :

currentChart.destroy();