chart.js पूरी तरह से नया डेटा लोड करते हैं

Question 1

chart.jsउदाहरण के लिए, एपीआई एक डेटासेट्स के बिंदुओं को संपादित करने की अनुमति देता है:

.update( )

आपके चार्ट उदाहरण पर कॉलिंग अपडेट () किसी भी अद्यतन मूल्यों के साथ चार्ट को फिर से प्रस्तुत करेगा, जिससे आप कई मौजूदा बिंदुओं के मूल्य को संपादित कर सकते हैं, फिर उन्हें एक एनिमेटेड रेंडर लूप में रेंडर कर सकते हैं।

.addData( valuesArray, label )

AddData (valuesArray, लेबल) को अपने चार्ट उदाहरण पर उन बिंदुओं पर एक लेबल के साथ प्रत्येक डेटासेट के लिए मानों की एक सरणी से गुजर रहा है।

.removeData( )

आपके चार्ट उदाहरण पर हटानेडाटा () को कॉल करने से चार्ट पर सभी डेटासेट के लिए पहला मान निकल जाएगा।

ये सभी महान हैं, लेकिन मैं यह पता नहीं लगा सकता कि पुराने को मिटाकर एक पूरी तरह से नए डेटासेट को कैसे लोड किया जाए। दस्तावेज़ीकरण इसे कवर नहीं करता है।

Question 2

मुझे इससे बहुत समस्याएँ थीं

पहले मैंने कोशिश की .clear()फिर मैंने कोशिश की .destroy()और मैंने अपने चार्ट के संदर्भ को अशक्त करने की कोशिश की

आखिरकार मेरे लिए क्या मुद्दा तय किया गया: <canvas>तत्व को हटाना और फिर <canvas>मूल कंटेनर में एक नए को फिर से जोड़ना

ऐसा करने के लिए एक लाख तरीके हैं:

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);
};

Question 3

आपको नष्ट करने की आवश्यकता है:

myLineChart.destroy();

फिर चार्ट को फिर से शुरू करें:

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

Question 4

Chart.js V2.0 के साथ आप निम्नलिखित कार्य कर सकते हैं:

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

Question 5

यह एक पुराना धागा है, लेकिन वर्तमान संस्करण में (1-feb-2017 के रूप में), चार्ट पर दिए गए डेटासेट को बदलना आसान है।

मान लें कि आपके नए x- अक्ष मान सरणी x में हैं और y- अक्ष मान सरणी y में हैं, तो आप चार्ट को अद्यतन करने के लिए नीचे दिए गए कोड का उपयोग कर सकते हैं।

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

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

chart.update();

Question 6

ChartJS 2.6 डेटा संदर्भ प्रतिस्थापन का समर्थन करता है ( नोट इन अपडेट (कॉन्फ़िगरेशन) प्रलेखन देखें)। इसलिए जब आपके पास आपका चार्ट हो, तो आप मूल रूप से ऐसा कर सकते हैं:

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

यह वह एनीमेशन नहीं करता है जो आपको पॉइंट्स जोड़ने से मिलेगा, लेकिन ग्राफ पर मौजूदा पॉइंट्स एनिमेटेड होंगे।

Question 7

मेरा यह समाधान बहुत सरल है। (संस्करण 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 ...

कोई चंचलता या समस्या नहीं। getDataSetयह देखने के लिए कि मुझे कौन सी डेटासेट की आवश्यकता है, को नियंत्रित करने के लिए एक फ़ंक्शन है

Question 8

मैंने इसका उत्तर यहां दिया है कि एक कैनवास से चार्ट को कैसे साफ़ करें ताकि होवर की घटनाओं को ट्रिगर न किया जा सके?

लेकिन यहाँ समाधान है:

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});
}

Question 9

डॉक्स के अनुसार, clear()कैनवास को साफ करता है। पेंट में इरेज़र टूल के रूप में सोचें। चार्ट उदाहरण में वर्तमान में लोड किए गए डेटा से इसका कोई लेना-देना नहीं है।

उदाहरण को नष्ट करना और नया बनाना व्यर्थ है। इसके बजाय, एपीआई विधियों removeData()और का उपयोग करें addData()। ये चार्ट उदाहरण से / के लिए एक एकल खंड जोड़ / हटा देंगे। इसलिए यदि आप पूरी तरह से नया डेटा लोड करना चाहते हैं, तो बस एक चार्ट डेटा ऐरे को लूप करें, और कॉल removeData(index)(एरे इंडेक्स को वर्तमान सेगमेंट इंडेक्स के अनुरूप होना चाहिए)। फिर, addData(index)इसे नए डेटा के साथ भरने के लिए उपयोग करें। मेरा सुझाव है कि डेटा को लूप करने के लिए दो तरीकों को लपेटें, क्योंकि वे एकल खंड सूचकांक की अपेक्षा करते हैं। मैं का उपयोग करें resetChartऔर updateChart। जारी रखने से पहले, सुनिश्चित करें कि आप Chart.jsनवीनतम संस्करण और प्रलेखन की जाँच करें । उन्होंने डेटा को पूरी तरह से बदलने के लिए नए तरीके जोड़े होंगे ।

Question 10

मैं एक ही मुद्दे में भाग गया, मेरे पास एक पृष्ठ पर 6 पाई चार्ट हैं जो सभी एक ही समय में अपडेट किए जा सकते हैं। मैं चार्ट डेटा को रीसेट करने के लिए निम्न फ़ंक्शन का उपयोग कर रहा हूं।

// 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();

स्निपेट का विस्तार करें

Question 11

मैंने नेउम्यूजिक समाधान की कोशिश की , लेकिन बाद में पता चला कि नष्ट होने की एकमात्र समस्या गुंजाइश है ।

var chart;

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

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

फंक्शन स्कोप के बाहर मेरा चार्ट वेरिएबल ले जाना, मेरे लिए काम कर गया।

Question 12

उपर्युक्त उत्तरों में से किसी ने भी न्यूनतम कोड के साथ मेरी विशेष स्थिति में बहुत साफ तरीके से मदद नहीं की। मुझे गतिशील रूप से कई डेटासेट में जोड़ने के लिए सभी डेटासेट और लूप को हटाने की आवश्यकता थी। तो यह स्निप उन लोगों के लिए है जो उनके उत्तर को खोजे बिना पृष्ठ के निचले भाग तक ले जाते हैं :)

ध्यान दें: एक बार जब आप अपने सभी नए डेटा को डेटासेट ऑब्जेक्ट में लोड कर लेते हैं तो चार्ट.अपडेट () को कॉल करना सुनिश्चित करें। आशा है कि यह किसी की मदद करता है

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

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

Question 13

आपको पुराने डेटा को साफ़ करने की आवश्यकता है। पुनः आरंभ करने की आवश्यकता नहीं है:

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

Question 14

अगर किसी को भी रिएक्ट में ऐसा करने की तलाश है। एक linechart के लिए, मान लें कि आपके पास चार्ट के चारों ओर एक आवरण घटक है:

(यह मानता है कि आप v2 का उपयोग कर रहे हैं। आपको उपयोग करने की आवश्यकता नहीं है react-chartjs। यह chart.jsnpm से सामान्य पैकेज का उपयोग कर रहा है ।)

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कार्यक्षमता अद्यतन, जोड़ने के लिए अनुमति देता है, या से कोई भी डेटा निकाल this.props.data।

Question 15

नॉटरी चार्ट को नष्ट नहीं करता है। इस के साथ प्रयास करें

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();
    }

Question 16

कृपया जानें कि Chart.js (यहां संस्करण 2) कैसे काम करता है और इसे आप जो भी विशेषता चाहते हैं, उसके लिए करें:

1. कृपया मान लें कि आपके HTML में नीचे की तरह एक बार चार्ट है:

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

2. कृपया मान लें कि आपके पास एक जावास्क्रिप्ट कोड है जो आपके चार्ट को पहली बार भरता है (उदाहरण के लिए जब पृष्ठ लोड किया जाता है):

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}
    }
});

मान लीजिए कि आप अपने डेटासेट को पूरी तरह से अपडेट करना चाहते हैं। यह बहुत ही सरल है। कृपया उपरोक्त कोड देखें और देखें कि आपके चार्ट चर से डेटा तक का मार्ग कैसा है और फिर नीचे दिए गए पथ का अनुसरण करें:

chartInstancevar का चयन करें ।
फिर data nodeअंदर का चयन करें chartInstance।
फिर datasets nodeअंदर का चयन करें data node।
(नोट: जैसा कि आप देख सकते हैं, datasets nodeएक सरणी है। इसलिए आपको यह निर्दिष्ट करना होगा कि इस सरणी का कौन सा तत्व आप चाहते हैं। यहां हमारे पास केवल एक तत्व है datasets node। इसलिए हम उपयोग करते हैं ।datasets[0]
इसलिए सेलेक्ट करें datasets[0]
फिर data nodeअंदर का चयन करें datasets[0]।

यह चरण आपको देता है chartInstance.data.datasets[0].dataऔर आप नया डेटा सेट कर सकते हैं और चार्ट को अपडेट कर सकते हैं:

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

नोट: उपरोक्त एल्गोरिथ्म का पालन करके, आप बस अपने इच्छित नोड को प्राप्त कर सकते हैं ।

Question 17

एकमात्र समाधान जो मैं अपने लिए अब तक पा सकता हूं, वह है कि चार्ट को स्क्रैच से फिर से इनिशियलाइज़ करना:

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

हालाँकि यह मुझे कुछ अटपटा लगता है। किसी भी बेहतर, अधिक मानक समाधान कोई भी?

Question 18

मुझे इससे भी परेशानी थी। मेरे पास अलग-अलग सरणियों में डेटा और लेबल हैं फिर मैं चार्ट डेटा को फिर से संगठित करता हूं। मैंने लाइन जोड़ी ।estestroy (); जैसा कि ऊपर सुझाव दिया गया है कि चाल है

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

स्निपेट का विस्तार करें

Question 19

वहाँ है कैनवास समाशोधन या पुन: आरंभ करने के बिना यह करने के लिए एक तरह से है, लेकिन आप आदमी संभाल करने के लिए चार्ट के निर्माण है ताकि डेटा जब आप अद्यतन के लिए एक ही प्रारूप में है।

यहाँ देखें कि मैंने यह कैसे किया।

    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;
        }

मैं मूल रूप से निर्माण में लोड किए गए डेटा को स्क्रैप करता हूं, और फिर ऐड डेटा विधि के साथ सुधार करता हूं। इसका मतलब है कि मैं तब सभी बिंदुओं तक पहुंच सकता हूं। जब भी मैंने उस डेटा संरचना तक पहुँचने की कोशिश की है जो इसके द्वारा बनाई गई है:

Chart(ctx).Bar(dataNew);

कमांड, मुझे वह नहीं मिल सकता है जिसकी मुझे आवश्यकता है। इसका मतलब है कि आप सभी डेटा बिंदुओं को बदल सकते हैं, उसी तरह आपने उन्हें बनाया है, और पूरी तरह से खरोंच से बिना एनिमेशन के भी अपडेट () कॉल करें।

Question 20

चार्ट JS 2.0

बस चार्ट को सेट करें ।ata.labels = [];

उदाहरण के लिए:

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();

Question 21

चार्ट ऑब्जेक्ट बनाते समय आपको एक चर में उदाहरण को बचाने की आवश्यकता होती है।

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

और नया डेटा लोड करने से पहले, आपको इसे नष्ट करने की आवश्यकता है :

currentChart.destroy();

chart.js पूरी तरह से नया डेटा लोड करते हैं

`.update( )`

`.addData( valuesArray, label )`

`.removeData( )`