代码之家  ›  专栏  ›  技术社区  ›  Elvis Pesconi

在CharJS中重新激活数据值

chart.js javascript
  •  1
  • Elvis Pesconi  · 技术社区  · 6 年前

    我这里有个小情况。

    我在同一个页面中有两个图表,每次用户单击第一个图表时,第二个图表都会更改数据属性。。。第一次单击“所有内容”时效果良好,但如果我在第一张图表的另一段中单击,并返回到之前单击的上一段,则图表的动画根本不起作用,数据也会出现 立即没有任何动画。

    我已经尝试重置()。但这根本不起作用。 

    <!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>

    1 回复  |  直到 6 年前
        1
  •  0
  •   Kunal Khivensara    6 年前

    我也遇到了同样的问题,动画只在第一次进行独特的更新时才起作用,但是,找不到根本原因。

    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);                             
  }
}
    推荐文章
    code-geek  ·  Jquery根据单选按钮选择隐藏或显示文本字段
    4 月前
    Niobos  ·  如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?
    4 月前
    Alex  ·  在轻量级中同时解构和不解构变量
    4 月前
    Ângelo Rigo  ·  ReactJS映射:如何迭代[关闭]
    4 月前
    bairog  ·  从按属性筛选的对象数组字典中创建值数组
    4 月前
    KaiMcKiernan  ·  基于Math.random()的函数在另一个函数内不起作用[关闭]
    4 月前
    David Jeong  ·  浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?
    4 月前
    user29519291  ·  为不同的变量创建一个带有可重用Click函数的简单菜单
    5 月前
    user3472810  ·  Angular@Output/EventEmitter返回undefined
    5 月前
    lokiuucx  ·  JS对象属性返回未定义,尽管对象属性应该有值
    5 月前
    关于  
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号