Question

我正在尝试使用PHP和JavaScript过滤图表结果。我开始构建一个，然后按自己的意愿进行构建，因此我着手构建用于为图表生成不同结果的过滤功能，并设法使它们生成所需的形式。但是，我的问题是，当我更改图表生成和更改的选择输入时，它们却通过在彼此之间来回渲染和第四闪烁而闪烁，我不确定为什么吗？

我的假设是我可能会在输入更改中创建另一个图表，这可能会导致错误？

这是我的代码：

	<script type="text/javascript">
		$('.collapse').collapse()

		var colors = [];
		// Global Colors to Generate Random Color
		for (i = 0; i < 50; i++) {
		    r = Math.floor(Math.random() * 200);
		    g = Math.floor(Math.random() * 200);
		    b = Math.floor(Math.random() * 200);
		    c = 'rgb(' + r + ', ' + g + ', ' + b + ')';
		    colors.push(c);
		};

		var canvas = document.getElementsByTagName('canvas');

		$(document).ready(function(){
			var delivered = document.getElementById('delivered');
			var chartContainer = document.getElementById('chartContainer');
		})

		// Delivered Accordion Filter
		function totalChange(){
			switch(delivered.options[delivered.selectedIndex].value){
				case "Total Results":
					canvas[0].id = "totaltoolkits";
					var ctx = document.getElementById("totaltoolkits");
						var myChart = new Chart(ctx, {
							    type: 'bar',
							    data: {
							        labels: <?php echo json_encode($locations) ?>,
							        datasets: [{
							            label: 'Total Results',
							            data: <?php echo json_encode($count) ?>,
							            backgroundColor: colors,
							        }]
							    },
							    options: {
							        scales: {
							            yAxes: [{
							                ticks: {
							                    beginAtZero:true,
							                    fontSize: 12
							                }
							            }],
							            xAxes: [{
							                ticks: {
							                    beginAtZero:true,
							                    fontSize: 12,
							                    autoSkip: false
							                }
							            }],
							        }
							    }
							});
					break;
				case "Today":
					canvas[0].id="todaytoolkits";
					var ctx = document.getElementById("todaytoolkits");
						var myChart = new Chart(ctx, {
							    type: 'bar',
							    data: {
							    	labels: ['second', 'Chart', 'GenerationTest'],
							        //labels: <?php echo json_encode($locations) ?>,
							        datasets: [{
							            label: 'Second Test',
							            data: [1, 2,],
							            backgroundColor: colors,
							        }]
							    },
							    options: {
							        scales: {
							            yAxes: [{
							                ticks: {
							                    beginAtZero:true,
							                    fontSize: 12
							                }
							            }],
							            xAxes: [{
							                ticks: {
							                    beginAtZero:true,
							                    fontSize: 12,
							                    autoSkip: false
							                }
							            }],
							        }
							    }
							});
					break;
				case "Yesterday":
					canvas[0].id="yesterdaytoolkits";
					break;
				case "Last 7 Days":
					canvas[0].id="last7daystoolkits";
					break;
				case "Last 30 Days":
					canvas[0].id="last30daystoolkits";
					break;
				case "This Month":
					canvas[0].id="thismonthstoolkits";
					break;
				case "Custom Range":
					canvas[0].id="customrangetoolkits";
					break;
				default:
					canvas[0].id="totaltoolkits";
			}
		}
	</script>
<body>
	<div class="fluid-container">
	</div>
		<div class="container">
			<h1>Metrics</h1>
			<div class="row">
				<!-- Accordion -->
			<div class="accordion" id="accordionColumn">
				  <div class="card">
				    <div class="card-header" id="headingOne">
				      <h5 class="mb-0">
				        <a data-toggle="collapse" class="collapsed" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
				          <span id="description">Delivered Toolkits</span>
				        </a>
				      </h5>
				    </div>

				    <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionColumn">
				      <div class="card-body" id="cardOne">
				      	<select
							class="form-control"
				    		name="delivered" 
				    		id="delivered"
							onChange="totalChange()"
				    		>
				    	 	<option selected disabled>Filter By:</option>
				    	 	<option value="Total Toolkits">Total Toolkits</option>
				    	 	<option value="Today">Today</option>
				    	 	<option value="Yesterday">Yesterday</option>
				    	 	<option value="Last 7 Days">Last 7 Days</option>
				    	 	<option value="Last 30 Days">Last 30 Days</option>
				    	 	<option value="This Month">This Month</option>
				    	 	<option value="Custom Range">Custom Range</option>
				    	 </select>
				      	<div id="chartContainer">
				        	<canvas class="displayChart" id=""></canvas>
				      	</div>
				      </div>
				    </div>
				  </div>				
			</div>
		</div>
</body>
</html>

Answer 1

您不必对现有数据集进行突变以使其具有良好的动画效果，而不必创建新图表或重新分配datasets。

例如

const chart = new Chart(ctx, { ... });
//chart.datasets = [/* new datasets */] // bad! won't animate
chart.datasets[0].data = [/* new data */] // good!
chart.update();

快速生成不同的图表结果会导致闪烁

1 个答案: