var ctx = document.getElementById("canvas");
                var Param1Data = {
                    label: "Param1",
                    yAxisID: 'A',
                    data: chartParam1Value,
                    lineTension: 0.5,
                    fill: false,
                    borderColor: 'red'
                };

                var Param2Data = {
                    label: "Param2",
                    yAxisID: 'B',
                    data: chartParam2Value,
                    lineTension: 0.5,
                    fill: false,
                    borderColor: 'blue'
                };

                var MainDataSet = {
                    labels: chartDataValue,
                    datasets: [Param1Data, Param2Data]
                };

                var chartOptions = {
                    legend: {
                        display: true,
                        position: 'top',
                        labels: {
                            boxWidth: 80,
                            fontColor: 'black'
                        }
                    },
                    scales: {
                        yAxes: [{
                            id: 'A',
                            type: 'linear',
                            position: 'left',
                            ticks: {
                                max: 10000,
                                min: 0
                            }
                        }, {
                            id: 'B',
                            type: 'linear',
                            position: 'right',
                            ticks: {
                                max: 10000,
                                min: 0
                            }
                        }]
                    }
                };

                chart = new Chart(ctx, { type: 'line', data: MainDataSet,options: chartOptions});

               // chart = new Chart(ctx, config);  // call for canvas 
            }

जब मैं इस फ़ंक्शन का उपयोग करके उन 2 डेटा लाइनों को अपडेट करने का प्रयास करता हूं, तो यह लाइनों को अपडेट नहीं करता है।

    addData()
            {
                     chart.data.labels.push(chartDataValue);
        
                        chart.data.datasets.forEach((dataset) => {
                            dataset.data.push(chartParam1Value);
                        });
        
                        chart.data.datasets.forEach((dataset) => {
                            dataset.data.push(chartParam2Value);
                      });
     chart.update(); //Updating the chart
      }
  setInterval(addData, 3000); // calling update method for new datapoint

मेरे पास चारजेएस ग्राफ में 2 लाइनों के लिए 2 डेटासेट हैं, पहला डेटा इंसर्ट ड्रा ग्राफ में एकदम सही है, लेकिन जब मैं डेटासेट को अपडेट करने का प्रयास करता हूं, तो यह डेटा को एडडेटा () फ़ंक्शन के माध्यम से अपडेट नहीं कर रहा है। क्या कोई दिखा सकता है कि चारजेएस ग्राफ में अपडेट फ़ंक्शन के माध्यम से 2 लाइनों को कैसे अपडेट किया जाए?

0
OgWestside 19 फरवरी 2021, 16:17

1 उत्तर

सबसे बढ़िया उत्तर

दस्तावेज़ीकरण के अनुसार (https://www .chartjs.org/docs/latest/developers/updates.html#adding-or-removing-data) सरणी में अपना डेटा जोड़ने के बाद आपको इसे अपडेट करने के लिए अपने चार्ट पर अपडेट विधि को कॉल करना होगा जैसे यह:

             updateChart = (dataset) =>{
                chart.data.datasets.forEach((dataset) => {
                    dataset.data.push(chartParam1Value);
                });

                chart.data.datasets.forEach((dataset) => {
                    dataset.data.push(chartParam2Value);
                });
                chart.update()
             }
0
LeeLenalee 19 फरवरी 2021, 16:33
मैं इसे addData() फ़ंक्शन के अंत में कॉल कर रहा हूं। लेकिन यह सवाल नहीं है। सवाल यह है कि जब मैं 2 लाइनों के 2 डेटासेट को अपडेट करना चाहता हूं तो मैं अपडेट विधि (जो आपने लिंक में दिया है) को कैसे कॉल करूं यानी मैं इसे कैसे अपडेट करूं ---- डेटासेट: [परम 1 डेटा, पैराम 2 डेटा]?
 – 
OgWestside
19 फरवरी 2021, 16:59
चार्ट.डेटा.डेटासेट[0].डेटा = arrayWithUpdatedData; चार्ट.डेटा.डेटासेट[1].डेटा = arrayWithUpdatedData2; चार्ट.अपडेट ()
 – 
LeeLenalee
19 फरवरी 2021, 17:13
उपरोक्त टिप्पणी सही उत्तर देने वाला है :)
 – 
OgWestside
23 फरवरी 2021, 15:19