MAMAMMA
50
2019-07-11 20:35:28
4
160

[Vue] (초보) Chart.js 사용해서 Chart 만드는데 update 하면 기존 차트가 남아있습니다


처음 업데이트시 문제 없지만,

마우스 커서가 Canvas 에 올라가는경우 이전 데이터를 보여줍니다....

무엇이 잘못된걸까요 ㅠㅠㅠ

중간에Destroy() 를 넣어봐도 똑같내요 선언을 잘못한걸까요?

Vue

<template>

    <div id="app5">

      <canvas id="planet-chart"></canvas>


      <button v-on:click="createChart('planet-chart',planetChartData,false)">click-me</button>


    </div>

</template>


Script


<script>

    import Chart from 'chart.js';


    export const planetChartData = {

          type: 'line',//'bar'

          data: {

            labels: ['Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter', 'Saturn', 'Uranus', 'Neptune'],

            datasets: [

              { // one line graph

                label: 'Number of Moons',

                data: [100, 55, 1, 2, 67, 62, 27, 14],

                backgroundColor: [

                  'rgba(54,73,93,.5)', // Blue

                  'rgba(54,73,93,.5)',

                  'rgba(54,73,93,.5)',

                  'rgba(54,73,93,.5)',

                  'rgba(54,73,93,.5)',

                  'rgba(54,73,93,.5)',

                  'rgba(54,73,93,.5)',

                  'rgba(54,73,93,.5)'

                ],

                borderColor: [

                  '#36495d',

                  '#36495d',

                  '#36495d',

                  '#36495d',

                  '#36495d',

                  '#36495d',

                  '#36495d',

                  '#36495d',

                ],

                borderWidth: 3

              },

              { // another line graph

                label: 'Planet Mass (x1,000 km)',

                data: [4.8, 12.1, 12.7, 6.7, 139.8, 116.4, 50.7, 49.2],

                backgroundColor: [

                  'rgba(71, 183,132,.5)', // Green

                ],

                borderColor: [

                  '#47b784',

                ],

                borderWidth: 3

              }

            ]

          },

          options: {

            responsive: true,

            lineTension: 1,

            scales: {

              yAxes: [{

                ticks: {

                  beginAtZero: true,

                  padding: 25,

                }

              }]

            }

          }

        }


    export default {

        name: 'app5',

        methods:{

          createChart(chartId, chartData,first_1) {

            const ctx = document.getElementById(chartId);

            const myChart = new Chart(ctx, {

              type: chartData.type,

              data: chartData.data,

              options: chartData.options,

            });

            if(first_1==false){


            myChart.data.datasets[0].data[0] = this.Data_1;

            myChart.update();

          }else{

            console.log(myChart.data);

            }

          }


        },


        data(){

          return{

            planetChartData: planetChartData,

            Data_1: 0

          }

        },

        beforeMount(){

          //this.createChart('planet-chart',this.planetChartData);

        },

        computed: {


        },

        mounted() {

          this.createChart('planet-chart',this.planetChartData,true);


        }

    }

</script>


0
0
  • 답변 4

  • ISA
    633
    2019-07-11 22:02:05

    데이터 저장하는 객체나 배열을 초기화하는 구문을 넣어주세요

    0
  • MAMAMMA
    50
    2019-07-12 10:18:02

    답변감사합니다! 허나 어떻게 진행해야 되는지 예제를 알려주실수 있을까요? ㅠㅠ

    0
  • ISA
    633
    2019-07-12 19:03:51
    초기화구문이라 해서 별거 없습니다. 그냥 초기화 해야하는 데이터를 데이터 집어넣기전에 data = '' 나 [] {}등으로 안에든 데이터를 대입시켜 날려주면 됩니다. 초기 선언식이죠 이건 뷰 뿐만아니라 자바스크립트 그리고 왠만한 컴퓨팅 언어라면 다 있는 요소입니다 데이터가 남아있다는건 그전의 데이터를 할당받은 상태로 초기화해주지 않았다는 것이고 그렇기에 예제라고 할만할 것도 없습니다.
    0
  • MAMAMMA
    50
    2019-07-15 20:36:09

    감사합니다!!

    0
  • 로그인을 하시면 답변을 등록할 수 있습니다.