চার্ট.জেস সম্পূর্ণ নতুন ডেটা লোড করে

Question 1

এপিআই এর জন্যchart.js এটির মধ্যে লোড হওয়া ডেটাসেটগুলির পয়েন্টগুলি সম্পাদনা করার অনুমতি দেয়, উদাহরণস্বরূপ:

.update( )

আপনার চার্ট উদাহরণে কলিং আপডেট () আপনাকে কোনও একাধিক বিদ্যমান পয়েন্টের মান সম্পাদনা করতে, তারপরে একটি অ্যানিমেটেড রেন্ডার লুপে রেন্ডার করে কোনও আপডেট হওয়া মানগুলির সাথে চার্টটিকে পুনরায় রেন্ডার করবে।

.addData( valuesArray, label )

আপনার চার্টে অ্যাডডেটা (মানসমূহের অ্যারে, লেবেল) কল করা হচ্ছে প্রতিটি পয়েন্টের জন্য একটি লেবেল সহ প্রতিটি ডেটাসেটের জন্য মানগুলির একটি অ্যারে পাস করে instance

.removeData( )

আপনার চার্ট উদাহরণে অপসারণ ডেটা () কল করা চার্টের সমস্ত ডেটাসেটের প্রথম মান সরিয়ে ফেলবে।

এগুলি সবই দুর্দান্ত, তবে পুরানোটি মুছে ফেলাতে কীভাবে সম্পূর্ণ নতুন ডেটাসেটটি লোড করা যায় তা আমি বুঝতে পারি না। ডকুমেন্টেশন এটি আবরণ বলে মনে হচ্ছে না।

Question 2

আমার এ নিয়ে বিশাল সমস্যা ছিল

প্রথমে আমি চেষ্টা করেছি .clear()তারপরে আমি চেষ্টা করেছি .destroy()এবং আমি আমার চার্টের রেফারেন্সটি নালায় সেট করার চেষ্টা করেছি

কি পরিশেষে আমার জন্য সমস্যা সমাধান করা হয়েছে: মুছে ফেলার <canvas>উপাদান এবং একটি নতুন তারপর reappending <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 হিসাবে) চার্ট.জেজে প্লট করা ডেটাসেটগুলি প্রতিস্থাপন করা সহজ:

ধরুন আপনার নতুন এক্স-অক্ষের মানগুলি অ্যারে এক্সে এবং 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
    );
}

আমার চার্ট ভেরিয়েবলটি ফাংশনের সুযোগের বাইরে নিয়ে যাওয়া, এটি আমার পক্ষে কাজ করে got

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

যদি কেউ কীভাবে প্রতিক্রিয়াতে এটি করতে চাইছেন। লিনিচার্টের জন্য, ধরে নিই চার্টের চারপাশে আপনার একটি মোড়কের উপাদান রয়েছে:

(এটি ধরে নিয়েছে আপনি ভি 2 ব্যবহার করছেন react-chartjs। আপনার ব্যবহারের দরকার নেই This এটি chart.jsএনএমপি থেকে সাধারণ প্যাকেজটি ব্যবহার করছে ))

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 এখানে) কীভাবে কাজ করে তা শিখুন এবং যা কিছু বৈশিষ্ট্য চান তার জন্য এটি করুন:

১. অনুগ্রহ করে ধরুন আপনার এইচটিএমএল-এ নীচের মতো একটি বার চার্ট রয়েছে:

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

মনে করুন আপনি নিজের ডেটাসেট পুরোপুরি আপডেট করতে চান। এটা খুব সহজ। উপরের কোডটি দেখুন এবং দেখুন কীভাবে আপনার চার্ট থেকে ডেটাতে পরিবর্তনশীল এবং তারপরে নীচের পথটি অনুসরণ করুন:

বিভিন্ন নির্বাচন করুন chartInstance।
তারপরে এর data nodeভিতরে নির্বাচন করুন chartInstance।
তারপরে এর datasets nodeভিতরে নির্বাচন করুন data node।
(দ্রষ্টব্য: আপনি দেখতে পাচ্ছেন,datasets node এটি একটি অ্যারে so সুতরাং আপনার এই অ্যারের কোন উপাদানটি আপনি চান তা আপনাকে নির্দিষ্ট করতে হবে here এখানে আমাদের মধ্যে একটি মাত্র উপাদান রয়েছে 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

এ নিয়ে আমারও প্রচুর সমস্যা ছিল। আমার আলাদা আলাদা অ্যারেতে ডেটা এবং লেবেল রয়েছে তারপরে আমি চার্টের ডেটাটি পুনরায় নতুন করে। আমি লাইন.ডেস্ট্রয় যুক্ত করেছি (); উপরে পরামর্শ হিসাবে যা কৌশলটি করেছে

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

চার্ট জেএস 2.0

স্রেফ চার্ট.ডাটা.লাবেলস সেট করুন = [];

উদাহরণ স্বরূপ:

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

চার্ট.জেস সম্পূর্ণ নতুন ডেটা লোড করে

`.update( )`

`.addData( valuesArray, label )`

`.removeData( )`