时间戳

首页 > 解决方案 > 在 CharJS 中重新激活数据值

javascript - 在 CharJS 中重新激活数据值

问题描述

我这里有一个小情况。

我在同一页面中有 2 个图表，每次用户单击第一个图表时，第二个图表都会更改数据属性...第一次单击时一切正常，但是如果我单击第一个图表的另一段并返回之前点击的上一段，我的图表的动画根本不起作用，数据立即出现，没有任何动画。

我已经尝试重置（）。但根本行不通。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="assets/main.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.7.0/dist/Chart.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
    </head>
<body>
    <section id="banner_topo">
       <p>Cronograma</p> 
    </section>
     <div id="graficos">
        <div class="graficoAnual" style="float: left; left: 0px; width: 800px; margin-top: 10px;"> 
            <canvas id="myChartAno"></canvas>
        </div>
        <div id="graficoMensal">
            <p id="mes">Valores Mensais</p>
              <canvas id="myChartMes" class="chartjs-render-monitor"></canvas>
        </div>
      </div>        
  
 
    <script>

        var dataAno = {
          datasets: [{
            data: [300, 150, 100,500,323,145,665,143,211,100,123,400],
            backgroundColor: [
              "#F7464A",
              "#46BFBD",
              "#FDB45C",
              "#9400D3",
              "#4169E1",
              "#CD5C5C",
              "#FF6347",
              "#20B2AA",
              "#3CB371",
              "#FF8C00",
              "#DAA520",
              "#B0E0E6"
            ]
          }],
          labels: [
            "Janeiro",
            "Feveireiro",
            "Março",
            "Abril",
            "Maio",
            "Junho",
            "Julho",
            "Agosto",
            "Setembro",
            "Outubro",
            "Novembro",
            "Dezembro"
            ]
};

    var canvasAno = document.getElementById("myChartAno");
    var ctxAno = canvasAno.getContext("2d");
    var myNewChartAno = new Chart(ctxAno, {
      type: 'doughnut',
      data: dataAno,
      options: {
        legend: {
          position: 'bottom',
          fullWidth: true
        },
        animation: {
          duration: 4000
          }
        }  
      
    });


var dataLimpa = {
  datasets: [{
    data: [0, 0, 0],
    backgroundColor: [
      "#F7464A",
      "#46BFBD",
      "#FDB45C"
    ]
  }],
  labels: [
    "Red",
    "Green",
    "Yellow"
  ],
};

var dataJan = {
  datasets: [{
    data: [30, 50, 100],
    backgroundColor: [
      "#F7464A",
      "#46BFBD",
      "#FDB45C"
    ]
  }],
  labels: [
    "Red",
    "Green",
    "Yellow"
  ],
};

    var dataFev = {
  datasets: [{
    data: [150, 50, 100],
    backgroundColor: [
      "#F7464A",
      "#46BFBD",
      "#FDB45C"
    ]
  }],
  labels: [
    "Red",
    "Green",
    "Yellow"
  ]
};

    var dataMar = {
  datasets: [{
    data: [5, 50, 100],
    backgroundColor: [
      "#F7464A",
      "#46BFBD",
      "#FDB45C"
    ]
  }],
  labels: [
    "Red",
    "Green",
    "Yellow"
  ]
};

    var dataAbr = {
  datasets: [{
    data: [32, 50, 100],
    backgroundColor: [
      "#F7464A",
      "#46BFBD",
      "#FDB45C"
    ]
  }],
  labels: [
    "Red",
    "Green",
    "Yellow"
  ]
};

    var dataMai = {
  datasets: [{
    data: [654, 50, 100],
    backgroundColor: [
      "#F7464A",
      "#46BFBD",
      "#FDB45C"
    ]
  }],
  labels: [
    "Red",
    "Green",
    "Yellow"
  ]
};

    var dataJun = {
  datasets: [{
    data: [53, 50, 100],
    backgroundColor: [
      "#F7464A",
      "#46BFBD",
      "#FDB45C"
    ]
  }],
  labels: [
    "Red",
    "Green",
    "Yellow"
  ]
};

    var dataJul = {
  datasets: [{
    data: [21, 50, 100],
    backgroundColor: [
      "#F7464A",
      "#46BFBD",
      "#FDB45C"
    ]
  }],
  labels: [
    "Red",
    "Green",
    "Yellow"
  ]
};

    var dataAgo = {
  datasets: [{
    data: [423, 50, 100],
    backgroundColor: [
      "#F7464A",
      "#46BFBD",
      "#FDB45C"
    ]
  }],
  labels: [
    "Red",
    "Green",
    "Yellow"
  ]
};

    var dataSet = {
  datasets: [{
    data: [1300, 50, 100],
    backgroundColor: [
      "#F7464A",
      "#46BFBD",
      "#FDB45C"
    ]
  }],
  labels: [
    "Red",
    "Green",
    "Yellow"
  ]
};

    var dataOut = {
  datasets: [{
    data: [213, 50, 100],
    backgroundColor: [
      "#F7464A",
      "#46BFBD",
      "#FDB45C"
    ]
  }],
  labels: [
    "Red",
    "Green",
    "Yellow"
  ]
};

  var dataNov = {
  datasets: [{
    data: [765, 50, 100],
    backgroundColor: [
      "#F7464A",
      "#46BFBD",
      "#FDB45C"
    ]
  }],
  labels: [
    "Red",
    "Green",
    "Yellow"
  ]
};

    var dataDez = {
  datasets: [{
    data: [3100, 50, 100],
    backgroundColor: [
      "#F7464A",
      "#46BFBD",
      "#FDB45C"
    ]
  }],
  labels: [
    "Red",
    "Green",
    "Yellow"
  ]
};
  
    var canvasMes = document.getElementById("myChartMes");
    var ctxMes = canvasMes.getContext("2d");
    var myNewChartMes = new Chart(ctxMes, {
      type: 'bar',
      data: dataDez,
      options:{
        responsive: true,
        scales: {
						xAxes: [{
							stacked: true,
						}],
						yAxes: [{
							stacked: true
						}]
					},
      }
    });
  

        
     canvasAno.onclick = function(evt){
            var activePoints = myNewChartAno.getElementsAtEvent(evt);
            if (activePoints[0]) {
            var chartData = activePoints[0]['_chart'].config.data;
            var idx = activePoints[0]['_index'];
            var mesclicado; 
            var dataSelect; 
        
            switch (idx){
              case 0:
                mesclicado = 'Janeiro';
                dataSelect = dataJan;
                break;
              case 1:
                mesclicado = 'Fevereiro';
                dataSelect = dataFev;
                break;
              case 2:
                mesclicado = 'Março';
                dataSelect = dataMar;
                break;
              case 3:
                mesclicado = 'Abril';
                dataSelect = dataAbr;
                break;
              case 4:
                mesclicado = 'Maio';
                dataSelect = dataMai;
                break;
              case 5:
                mesclicado = 'Junho';
                dataSelect = dataJun;
                break;
              case 6:
                mesclicado = 'Julho';
                dataSelect = dataJul;
                break;
              case 7:
                mesclicado = 'Agosto';
                dataSelect = dataAgo;
                break;
              case 8:
                mesclicado = 'Setembro';
                dataSelect = dataSet;
                break;
              case 9:
                mesclicado = 'Outubro';
                dataSelect = dataOut;
                break;  
              case 10:
                mesclicado = 'Novembro';
                dataSelect = dataNov;
                break;  
              case 11:
                mesclicado = 'Dezembro';
                dataSelect = dataDez;
                break;  
            }
                document.getElementById('mes').innerHTML = mesclicado;
                myNewChartMes.data = dataSelect;                
                myNewChartMes.update();
                myNewChartMes.render({
             duration: 800,
              lazy: false,
              
            });
            
                
                
                
            }          
          }
        
                 
    </script>
</body>

</html>

有人能帮我吗？

标签： javascriptchart.js

解决方案

我也遇到了同样的问题，动画仅在第一次唯一更新时才有效，但是找不到根本原因。

但是有一个很好且简单的方法可以完成此操作，即在销毁前一个图表后渲染一个新图表。我已经使用 jQuery 克隆配置以在下面的代码中创建一个新图表，但您也可以使用纯 javascript。请参阅下面的代码或此工作小提琴-> http://jsfiddle.net/jpzg7w2k/1/

var dataAno = {
  datasets: [{
    data: [300, 150, 100, 500, 323, 145, 665, 143, 211, 100, 123, 400],
    backgroundColor: [
      "#F7464A",
      "#46BFBD",
      "#FDB45C",
      "#9400D3",
      "#4169E1",
      "#CD5C5C",
      "#FF6347",
      "#20B2AA",
      "#3CB371",
      "#FF8C00",
      "#DAA520",
      "#B0E0E6"
    ]
  }],
  labels: [
    "Janeiro",
    "Feveireiro",
    "Março",
    "Abril",
    "Maio",
    "Junho",
    "Julho",
    "Agosto",
    "Setembro",
    "Outubro",
    "Novembro",
    "Dezembro"
  ]
};

var canvasAno = document.getElementById("myChartAno");
var ctxAno = canvasAno.getContext("2d");
var myNewChartAno = new Chart(ctxAno, {
  type: 'doughnut',
  data: dataAno,
  options: {
    legend: {
      position: 'bottom',
      fullWidth: true
    },
    animation: {
      duration: 4000
    }
  }
});


var dataLimpa = {
  datasets: [{
    data: [0, 0, 0],
    backgroundColor: [
      "#F7464A",
      "#46BFBD",
      "#FDB45C"
    ]
  }],
  labels: [
    "Red",
    "Green",
    "Yellow"
  ],
};

var dataJan = {
  datasets: [{
    data: [30, 50, 100],
    backgroundColor: [
      "#F7464A",
      "#46BFBD",
      "#FDB45C"
    ]
  }],
  labels: [
    "Red",
    "Green",
    "Yellow"
  ],
};

var dataFev = {
  datasets: [{
    data: [150, 50, 100],
    backgroundColor: [
      "#F7464A",
      "#46BFBD",
      "#FDB45C"
    ]
  }],
  labels: [
    "Red",
    "Green",
    "Yellow"
  ]
};

var dataMar = {
  datasets: [{
    data: [5, 50, 100],
    backgroundColor: [
      "#F7464A",
      "#46BFBD",
      "#FDB45C"
    ]
  }],
  labels: [
    "Red",
    "Green",
    "Yellow"
  ]
};

var dataAbr = {
  datasets: [{
    data: [32, 50, 100],
    backgroundColor: [
      "#F7464A",
      "#46BFBD",
      "#FDB45C"
    ]
  }],
  labels: [
    "Red",
    "Green",
    "Yellow"
  ]
};

var dataMai = {
  datasets: [{
    data: [654, 50, 100],
    backgroundColor: [
      "#F7464A",
      "#46BFBD",
      "#FDB45C"
    ]
  }],
  labels: [
    "Red",
    "Green",
    "Yellow"
  ]
};

var dataJun = {
  datasets: [{
    data: [53, 50, 100],
    backgroundColor: [
      "#F7464A",
      "#46BFBD",
      "#FDB45C"
    ]
  }],
  labels: [
    "Red",
    "Green",
    "Yellow"
  ]
};

var dataJul = {
  datasets: [{
    data: [21, 50, 100],
    backgroundColor: [
      "#F7464A",
      "#46BFBD",
      "#FDB45C"
    ]
  }],
  labels: [
    "Red",
    "Green",
    "Yellow"
  ]
};

var dataAgo = {
  datasets: [{
    data: [423, 50, 100],
    backgroundColor: [
      "#F7464A",
      "#46BFBD",
      "#FDB45C"
    ]
  }],
  labels: [
    "Red",
    "Green",
    "Yellow"
  ]
};

var dataSet = {
  datasets: [{
    data: [1300, 50, 100],
    backgroundColor: [
      "#F7464A",
      "#46BFBD",
      "#FDB45C"
    ]
  }],
  labels: [
    "Red",
    "Green",
    "Yellow"
  ]
};

var dataOut = {
  datasets: [{
    data: [213, 50, 100],
    backgroundColor: [
      "#F7464A",
      "#46BFBD",
      "#FDB45C"
    ]
  }],
  labels: [
    "Red",
    "Green",
    "Yellow"
  ]
};

var dataNov = {
  datasets: [{
    data: [765, 50, 100],
    backgroundColor: [
      "#F7464A",
      "#46BFBD",
      "#FDB45C"
    ]
  }],
  labels: [
    "Red",
    "Green",
    "Yellow"
  ]
};

var dataDez = {
  datasets: [{
    data: [3100, 50, 100],
    backgroundColor: [
      "#F7464A",
      "#46BFBD",
      "#FDB45C"
    ]
  }],
  labels: [
    "Red",
    "Green",
    "Yellow"
  ]
};

var canvasMes = document.getElementById("myChartMes");
var ctxMes = canvasMes.getContext("2d");

var myNewChartMes = new Chart(ctxMes, {
  type: 'bar',
  data: dataDez,
  options: {
    responsive: true,
    scales: {
      xAxes: [{
        stacked: true,
      }],
      yAxes: [{
        stacked: true
      }]
    },
  }
});



canvasAno.onclick = function(evt) {
  var activePoints = myNewChartAno.getElementsAtEvent(evt);
  if (activePoints[0]) {
    var chartData = activePoints[0]['_chart'].config.data;
    var idx = activePoints[0]['_index'];
    var mesclicado;
    var dataSelect;

    switch (idx) {
      case 0:
        mesclicado = 'Janeiro';
        dataSelect = dataJan;
        break;
      case 1:
        mesclicado = 'Fevereiro';
        dataSelect = dataFev;
        break;
      case 2:
        mesclicado = 'Março';
        dataSelect = dataMar;
        break;
      case 3:
        mesclicado = 'Abril';
        dataSelect = dataAbr;
        break;
      case 4:
        mesclicado = 'Maio';
        dataSelect = dataMai;
        break;
      case 5:
        mesclicado = 'Junho';
        dataSelect = dataJun;
        break;
      case 6:
        mesclicado = 'Julho';
        dataSelect = dataJul;
        break;
      case 7:
        mesclicado = 'Agosto';
        dataSelect = dataAgo;
        break;
      case 8:
        mesclicado = 'Setembro';
        dataSelect = dataSet;
        break;
      case 9:
        mesclicado = 'Outubro';
        dataSelect = dataOut;
        break;
      case 10:
        mesclicado = 'Novembro';
        dataSelect = dataNov;
        break;
      case 11:
        mesclicado = 'Dezembro';
        dataSelect = dataDez;
        break;
    }

    document.getElementById('mes').innerHTML = mesclicado;

    var config = $.extend(true, {}, myNewChartMes.config);
    var canvasMes = document.getElementById("myChartMes");
    var ctxMes = canvasMes.getContext("2d");    

    config.data = dataSelect; 

    if(myNewChartMes)
    {
        myNewChartMes.destroy();
    }

    myNewChartMes = new Chart(ctxMes, config);                             
  }
}

推荐阅读