ChartJS에서 선 그래프를 파기하는 방법

Question

JSON 데이터에서 시작일과 종료일을 선택할 때 업데이트되는 그래프가 있습니다. 그러나 점 위에 마우스를 가져 가면 이전 그래프가 계속 나타납니다.

myLineChart.destroy();에 대한 게시물을 많이 읽었지만 내 graph에 추가 할 방법을 찾을 수 없습니다.

var cdata = [{ 
 
    "_id": "585b544f5c86b6c8537c34d6", 
 
    "topic": "Humidity", 
 
    "message": 30, 
 
    "message1": 2, 
 
    "when": "2016-12-22T04:19:27.000Z" 
 
}, { 
 
    "_id": "585b54505c86b6c8537c34d7", 
 
    "topic": "Humidity", 
 
    "message": 10, 
 
    "message1": 25, 
 
    "when": "2016-12-22T04:19:28.000Z" 
 
}, { 
 
    "_id": "585b54515c86b6c8537c34d8", 
 
    "topic": "Humidity", 
 
    "message": 20, 
 
    "message1": 30, 
 
    "when": "2016-12-22T04:19:29.000Z" 
 
}, { 
 
    "_id": "585b54525c86b6c8537c34d9", 
 
    "topic": "Humidity", 
 
    "message": 50,"message1": 40, 
 
    "when": "2016-12-22T04:19:30.000Z" 
 
}, { 
 
    "_id": "585b54535c86b6c8537c34da", 
 
    "topic": "Humidity", 
 
    "message": 45, 
 
    "message1": 21, 
 
    "when": "2016-12-22T04:19:31.000Z" 
 
}] 
 
var labeldata = []; 
 
var chrtdata = []; 
 
var chartdata = []; 
 

 
for(var i =0; i < cdata.length; i++) 
 
{ 
 
    labeldata.push(cdata[i].when); 
 
    chrtdata.push(cdata[i].message) 
 
    chartdata.push(cdata[i].message1) 
 
} 
 

 

 
var ctx = document.getElementById("myChart").getContext("2d"); 
 
var myChart = new Chart(ctx, { 
 
    type: 'line', 
 
    data: { 
 
    labels: labeldata, 
 
    datasets: [{ 
 
     label: 'Humidity', 
 
     data: chrtdata, 
 
     backgroundColor: "rgba(255, 51, 0,0.6)" 
 
    }, 
 
    { 
 
     label: 'Temperature', 
 
     data: chartdata, 
 
     backgroundColor: "rgba(102, 0, 255,0.6)" 
 
    }, 
 
    
 
    ] 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.min.js"></script> 
 
<canvas id="myChart" width="400" height="400"></canvas>

사람이 나를 도울 수 있다면 감사하겠습니다

.

Answer 1

Here 예를 들어 그래프를 변경하지 않고 동적 값으로 그래프를 변경할 수 있습니다. 희망이 도움이됩니다.

function getRandomJson() { 
    var cdata = [{ 
     "_id": "585b544f5c86b6c8537c34d6", 
     "topic": "Humidity", 
     "message": Math.floor(Math.random() * (100 - 20 + 1)) + 20, 
     "message1": Math.floor(Math.random() * (50 - 5 + 1)) + 5, 
     "when": "2016-12-22T04:19:27.000Z" 
    }, { 
     "_id": "585b54505c86b6c8537c34d7", 
     "topic": "Humidity", 
     "message": Math.floor(Math.random() * (80 - 1 + 1)) + 1, 
     "message1": Math.floor(Math.random() * (40 - 5 + 1)) + 5, 
     "when": "2016-12-22T04:19:28.000Z" 
    }, { 
     "_id": "585b54515c86b6c8537c34d8", 
     "topic": "Humidity", 
     "message": Math.floor(Math.random() * (90 - 20 + 1)) + 20, 
     "message1": Math.floor(Math.random() * (60 - 20 + 1)) + 20, 
     "when": "2016-12-22T04:19:29.000Z" 
    }, { 
     "_id": "585b54525c86b6c8537c34d9", 
     "topic": "Humidity", 
     "message": Math.floor(Math.random() * (50 - 40 + 1)) + 40, 
     "message1": Math.floor(Math.random() * (70 - 30 + 1)) + 30, 
     "when": "2016-12-22T04:19:30.000Z" 
    }, { 
     "_id": "585b54535c86b6c8537c34da", 
     "topic": "Humidity", 
     "message": Math.floor(Math.random() * (85 - 20 + 1)) + 20, 
     "message1": Math.floor(Math.random() * (65 - 35 + 1)) + 35, 
     "when": "2016-12-22T04:19:31.000Z" 
    }]; 
    return cdata; 
} 

loadGraph(); 
function loadGraph() { 
var labeldata = []; 
var chrtdata = []; 
var chartdata = []; 
var cdata = getRandomJson(); 
for(var i =0; i < cdata.length; i++) 
{ 
    labeldata.push(cdata[i].when); 
    chrtdata.push(cdata[i].message) 
    chartdata.push(cdata[i].message1) 
} 
var ctx = document.getElementById("myChart").getContext("2d"); 
var myChart = new Chart(ctx, { 
    type: 'line', 
    data: { 
    labels: labeldata, 
    datasets: [{ 
     label: 'Humidity', 
     data: chrtdata, 
     backgroundColor: "rgba(255, 51, 0,0.6)" 
    }, 
    { 
     label: 'Temperature', 
     data: chartdata, 
     backgroundColor: "rgba(102, 0, 255,0.6)" 
    }, 
    ] 
    } 
}); 
} 

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.min.js"></script> 

<button type="button" onClick="loadGraph()">Change Me!</button> 
<canvas id="myChart" width="400" height="400"></canvas>