我想点击重置按钮重置并重建我的图表
我已经建立了一个符合我需求的图表 - jsfiddle
我添加了一些自定义控件，允许用户显示/隐藏所有系列，并选中/取消选中所有系列。
这些都很好。
我想要做的最后一部分是允许用户使用原始选项重置图表。
请参阅我的代码。
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel='stylesheet prefetch' href='https://tyleryasaka.github.io/semantic-ui-range/range.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
<script src='https://tyleryasaka.github.io/semantic-ui-range/range.js'></script>
<!-- #Content -->
<div id="Content">
<div class="content_wrapper clearfix">
<!-- .sections_group -->
<div class="sections_group">
<div class="entry-content" itemprop="mainContentOfPage">
<div class="section mcb-section " style="padding-top:0px; padding-bottom:0px; background-color:">
<div class="section_wrapper mcb-section-inner">
<div class="wrap mcb-wrap one valign-top clearfix" style="">
<div class="mcb-wrap-inner">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>
<script type="text/javascript">
var vtotal=0;
var surfing=0;
var emails=0;
var social=0;
var apps=0;
var music=0;
var video=0;
var standard_definition=0;
var high_definition=0;
var fourK_video=0;
var online_games=0;
var total=0;
function myChart(flag) {
// alert('gdfgd');
var ctx = document.getElementById("myChart").getContext('2d');
/*Chart.defaults.global.legend.display = false;*/
Chart.defaults.global.animation = false;
var resetCanvas = function () {
$('#results-graph').remove(); // this is my <canvas> element
$('#chartContainer').append('<canvas id="myChart"><canvas>');
canvas = document.querySelector('#myChart'); // why use jQuery?
ctx = canvas.getContext('2d');
};
var qnt_total = Math.floor(total/10);
/*Get Hidden value*/
$("#qt_value").val(qnt_total);
$("#qt_value").trigger('keyup');
var myChart = new Chart(ctx, {
type: 'bar',
interaction: {
enabled: false
},
data: {
labels: [""],
datasets: [{
label: total +' GB',
fill: false,
data: [total],
hover: {mode: null},
backgroundColor: [
'rgb(128,177,234)'
],
borderColor: [
'rgb(128,177,234)'
],
borderWidth: 1
}]
},
options: {
scales: {
responsive: true,
legend: { display: false },
display: true,
yAxes: [{
ticks: {
beginAtZero:true,
stepValue: 20,
max: 200
},
scaleLabel: {
display: true,
labelString: 'GB'
}
}]
}
}
});
// alert(flag);
// if(flag == 'reset'){
// myChart.clear();
// }
}
function rPlan() {
if (vtotal === 0){
$('#display-8').html("Select Data Amount ");
}
else if (vtotal > 0 && vtotal < 2){
$('#display-8').html("2GB plan for $35p/month");
}
else if (vtotal > 2 && vtotal < 6){
$('#display-8').html("6GB plan for $50p/month");
}
else if (vtotal > 6 && vtotal < 10){
$('#display-8').html("10GB plan for $65p/month");
}
else if (vtotal > 10 && vtotal < 14){
alert('test');
}
else if (vtotal > 14 && vtotal < 18){
$('#display-8').html("18GB plan for $95p/month");
}
else if (vtotal > 18 ){
$('#display-8').html("22GB plan for $110p/month");
}
$("#texens").val(total);
if(total == 0)
{
$("#data_plane_1").hide();
$("#data_plane_2").hide();
$("#data_plane_3").hide();
}
else if(total > 0 && total < 10)
{
$("#data_plane_1").show();
$("#data_plane_3").hide();
$("#data_plane_2").hide();
}
else if(total > 10 && total < 20)
{
$("#data_plane_1").hide();
$("#data_plane_2").show();
$("#data_plane_3").hide();
}
else if(total > 20 && total < 2000)
{
$("#data_plane_1").hide();
$("#data_plane_2").hide();
$("#data_plane_3").show();
}
}
rPlan();
$(document).ready(function(){
// Browsing
$('#range-1').range({
min: 0,
max: 24,
start: 0,
onChange: function(value) {
$('#display-1').html(value);
surfing = value*0.015*30;
total= surfing+emails+social+apps+music+standard_definition+high_definition+fourK_video+online_games;
total = Number(total).toFixed(2);
$('#display-7').html(total);
rPlan();
myChart();
}
});
// Emails
$('#range-2').range({
min: 0,
max: 600,
step: 10,
start: 0,
onChange: function(value) {
$('#display-2').html(value);
emails = value*0.005/10*30;
total= surfing+emails+social+apps+music+standard_definition+high_definition+fourK_video+online_games;
total = Number(total).toFixed(2);
$('#display-7').html(total);
rPlan();
myChart();
}
});
// Social
$('#range-3').range({
min: 0,
max: 100,
start: 0,
step: 5,
onChange: function(value) {
$('#display-3').html(value);
social = value*0.025/5*30;
total= surfing+emails+social+apps+music+standard_definition+high_definition+fourK_video+online_games;
total = Number(total).toFixed(2);
$('#display-7').html(total);
rPlan();
myChart()
}
});
// Apps
$('#range-4').range({
min: 0,
max: 50,
start: 0,
step: 1,
onChange: function(value) {
$('#display-4').html(value);
apps = value*0.005*30;
total= surfing+emails+social+apps+music+standard_definition+high_definition+fourK_video+online_games;
total = Number(total).toFixed(2);
$('#display-7').html(total);
rPlan();
myChart()
}
});
// Music
$('#range-5').range({
min: 0,
max: 24,
start: 0,
onChange: function(value) {
$('#display-5').html(value);
music = value*0.12*30;
total= surfing+emails+social+apps+music+standard_definition+high_definition+fourK_video+online_games;
total = Number(total).toFixed(2);
$('#display-7').html(total);
rPlan();
myChart()
}
});
// Video
/* $('#range-6').range({
min: 0,
max: 24,
step: .25,
start: 0,
onChange: function(value) {
$('#display-6').html(value);
video = value*2.5*30;
total = Number(total).toFixed(2);
total= surfing+emails+social+apps+music+video;
$('#display-7').html(total);
rPlan();
myChart()
}
});*/
// Standard-definition
$('#range-7').range({
min: 0,
max: 24,
start: 0,
onChange: function(value) {
$('#display-9').html(value);
standard_definition = value*0.7*30;
total= surfing+emails+social+apps+music+standard_definition+high_definition+fourK_video+online_games;
total = Number(total).toFixed(2);
$('#display-7').html(total);
rPlan();
myChart()
}
});
// High-definition
$('#range-8').range({
min: 0,
max: 24,
start: 0,
onChange: function(value) {
$('#display-10').html(value);
high_definition = value*2.5*30;
total= surfing+emails+social+apps+music+standard_definition+high_definition+fourK_video+online_games;
total = Number(total).toFixed(2);
$('#display-7').html(total);
rPlan();
myChart()
}
});
// 4K video
$('#range-9').range({
min: 0,
max: 24,
start: 0,
onChange: function(value) {
$('#display-11').html(value);
fourK_video = value*5.85*30;
total= surfing+emails+social+apps+music+standard_definition+high_definition+fourK_video+online_games;
total = Number(total).toFixed(2);
$('#display-7').html(total);
rPlan();
myChart()
}
});
// online games
$('#range-10').range({
min: 0,
max: 24,
start: 0,
onChange: function(value) {
$('#display-12').html(value);
online_games = value*0.012*30;
total= surfing+emails+social+apps+music+standard_definition+high_definition+fourK_video+online_games;
total = Number(total).toFixed(2);
$('#display-7').html(total);
rPlan();
myChart()
}
});
});
</script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
// $(function () {
// $("#dialog").dialog({
// modal: true,
// autoOpen: false,
// width: '100%',
// height: 'auto',
// open: function() {
// myChart();
// },
// draggable: false,
// dialogClass: 'calculator-modal-main'
// });
// $("#btnShow").click(function () {
// $('#dialog').dialog('open');
// });
// });
</script>
<div id="dialog" title="Estimate your monthly usage to assist you in choosing the right plan.">
<div id="main-content">
<div id="content-area" class="clearfix">
<div id="left-area" class="clearfix left-area">
<div class="ui segment">
<h3><strong>Hours browsing the web</strong></h3>
<div class="ui range" id="range-1"></div>
<div class="indicator">
<strong> <span id="display-1"></span></strong> Hours/Day
</div>
</div>
<div class="ui segment">
<h3><strong>Emails sent/received with attachments</strong></h3>
<div class="ui range" id="range-2"></div>
<div class="indicator">
<strong> <span id="display-2"></span></strong> Emails/Day
</div>
</div>
<div class="ui segment">
<h3><strong>Social media posts with photos</strong></h3>
<div class="ui range" id="range-3"></div>
<div class="indicator">
<strong> <span id="display-3"></span></strong> Posts/Day
</div>
</div>
<div class="ui segment">
<h3><strong>Apps/games/songs downloaded</strong></h3>
<div class="ui range" id="range-4"></div>
<div class="indicator">
<strong> <span id="display-4"></span></strong> Apps/Day
</div>
</div>
<div class="ui segment">
<h3><strong>Hours of streaming music</strong></h3>
<div class="ui range" id="range-5"></div>
<div class="indicator">
<strong> <span id="display-5"></span></strong> Hours/Day
</div>
</div>
<!-- <div class="ui segment">
<h3><strong>Hours of streaming video</strong></h3>
<div class="ui range" id="range-6"></div>
<div class="indicator">
<strong> <span id="display-6"></span></strong> Hours/Day
</div>
</div> -->
<div class="ui segment">
<h3><strong>Hours of streaming Standard-definition video</strong></h3>
<div class="ui range" id="range-7"></div>
<div class="indicator">
<strong> <span id="display-9"></span></strong> Hours/Day
</div>
</div>
<div class="ui segment">
<h3><strong>Hours of streaming High-definition video</strong></h3>
<div class="ui range" id="range-8"></div>
<div class="indicator">
<strong> <span id="display-10"></span></strong> Hours/Day
</div>
</div>
<div class="ui segment">
<h3><strong>Hours of streaming 4K video</strong></h3>
<div class="ui range" id="range-9"></div>
<div class="indicator">
<strong> <span id="display-11"></span></strong> Hours/Day
</div>
</div>
<div class="ui segment">
<h3><strong>Online games</strong></h3>
<div class="ui range" id="range-10"></div>
<div class="indicator">
<strong> <span id="display-12"></span></strong> Hours/Day
</div>
</div>
</div>
<div id="right-area" class="right-area">
<div class="ui segment data_plan_chart">
<div id="chartContainer"><canvas id="myChart" width="200" height="300"></canvas></div>
</div>
</br>
<input type="hidden" id="texens" name="user" value="texens" />
<input type="hidden" id="qt_value" name="qt_value" value="qt_value" />
<div class="plans-block">
<label>We Recommended:</label>
<div class="products" id="data_plane_1">
<p><?php
/*$args = array( 'post_type' => 'product', 'posts_per_page' => 5, 'product_cat' => 'dataplans', 'orderby' => 'rand' );
$loop = new WP_Query( $args );*/
$product = wc_get_product('596');
echo $product->get_title();
?></p>
<!-- <a id='cal_cart_1' class='recommend-btn' href='<?php // echo site_url(); ?>/?add-to-cart=596'>Add Recommended Plan</a> -->
<a id='cal_cart_1' class='recommend-btn' href='<?php echo esc_url_raw( add_query_arg( 'add-to-cart', '596', wc_get_checkout_url() ) ); ?>'>Add Recommended Plan</a>
</div><!--/.products-->
<div class="products" id="data_plane_2">
<p><?php
/*$args = array( 'post_type' => 'product', 'posts_per_page' => 5, 'product_cat' => 'dataplans', 'orderby' => 'rand' );
$loop = new WP_Query( $args );*/
$product = wc_get_product('1740');
$product_2 = wc_get_product('596');
$product_name = $product->get_title();
$product_name_2 = $product_2->get_title();
echo $product_merge_name = $product_name_2 . ' + ' . 'Additional 10GB Data';
?></p>
<script type="text/javascript">
jQuery(function(){
//var data_cart_id = "<?php //echo site_url(); ?>/shop/?add-to-cart=596,1740";
var data_cart_id = "<?php echo esc_url_raw( add_query_arg( 'add-to-cart', '596,1740', wc_get_checkout_url() ) ); ?>";
jQuery("#cal_cart_2").attr("href",data_cart_id);
});
</script>
<a id='cal_cart_2' class='recommend-btn' href=''>Add Recommended Plan</a>
</div><!--/.products-->
<div class="products" id="data_plane_3">
<?php
$a = " <script>
jQuery(document).ready(function(){
jQuery('#qt_value').on('keyup',function(){
var qnt_value = jQuery(this).val();
$('.listprice').html(qnt_value);
});
});
</script>";
?>
<p>
<?php
$product = wc_get_product('1740');
$product_2 = wc_get_product('596');
$product_name = $product->get_title();
$product_name_2 = $product_2->get_title();
echo $product_merge_name = $product_name_2 .' + '. '<span class="listprice">' . $a . '</span>'. 'x Additional 10GB Data';
?>
</p>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#qt_value').on('keyup',function(){
var qnt_value = jQuery(this).val();
var data_cart_id_2 = "<?php echo site_url(); ?>/checkout/?add-to-cart=596:1,1740:"+qnt_value;
jQuery("#cal_cart_3").attr("href",data_cart_id_2);
});
});
/* jQuery(function(){
var bla = $('#qt_value').val();
console.log(bla);
var data_cart_id_2 = "<?php echo site_url(); ?>/shop/?add-to-cart=1740:"+bla+",596:1";
jQuery("#cal_cart_3").attr("href",data_cart_id_2);
}); */
</script>
<script type="text/javascript">
$(document).ready(function(){
$('#reset').click(function() {
total=0;
$('#range-1').range({
min: 0,
max: 24,
//start: 0
start: 0,
onChange: function(value) {
$('#display-1').html(value);
}
});
$('#range-2').range({
min: 0,
max: 24,
//start: 0
start: 0,
onChange: function(value) {
$('#display-2').html(value);
}
});
$('#range-3').range({
min: 0,
max: 24,
//start: 0
start: 0,
onChange: function(value) {
$('#display-3').html(value);
}
});
$('#range-4').range({
min: 0,
max: 24,
//start: 0
start: 0,
onChange: function(value) {
$('#display-4').html(value);
}
});
$('#range-5').range({
min: 0,
max: 24,
//start: 0
start: 0,
onChange: function(value) {
$('#display-5').html(value);
}
});
$('#range-6').range({
min: 0,
max: 24,
//start: 0
start: 0,
onChange: function(value) {
$('#display-6').html(value);
}
});
$('#range-7').range({
min: 0,
max: 24,
//start: 0
start: 0,
onChange: function(value) {
$('#display-9').html(value);
}
});
$('#range-8').range({
min: 0,
max: 24,
//start: 0
start: 0,
onChange: function(value) {
$('#display-10').html(value);
}
});
$('#range-9').range({
min: 0,
max: 24,
//start: 0
start: 0,
onChange: function(value) {
$('#display-11').html(value);
}
});
$('#range-10').range({
min: 0,
max: 24,
//start: 0
start: 0,
onChange: function(value) {
$('#display-12').html(value);
}
});
});
});
</script>
<a id='cal_cart_3' class='recommend-btn' href=''>Add Recommended Plan</a>
<!-- ///cart/?add-to-cart=7781 -->
</div>
<input type="button" id="reset" value="Reset" />
<!-- <button id='reset' class='reset-btn'> Reset the data </button> --><!--/.products-->
</div>
</div>
<div class="text-right print-block">
<a class="print-btn" onClick="window.print()" href="javascript:void(0);">Print this page</a>
</div>
<script>
function myFunction() {
window.print();
}
</script>
<div class="usage-calculated">
<div class="usage-left">
<label>How is your usage calculated?</label>
<p>To calculate your usage, these approximations were applied:</p>
<table>
<tr>
<td width="65%"><label>Activity</label></td>
<td width="35%"><label>Approx. Data Usage</label></td>
</tr>
<tr>
<td>Hours Browsing the Web</td>
<td>15 MB/hour</td>
</tr>
<tr>
<td>Emails Sent/Received with Photos</td>
<td>500 KB/email</td>
</tr>
<tr>
<td>Social media posts with photos</td>
<td>5 MB/item</td>
</tr>
<tr>
<td>Apps/games/songs downloaded</td>
<td>5 MB/item</td>
</tr>
<tr>
<td>Hours of streaming music</td>
<td>2 MB/minute</td>
</tr>
<tr>
<td>Hours of streaming HD video</td>
<td>2.5 GB/hour</td>
</tr>
<tr>
<td>Standard-definition video</td>
<td>700 MB/hr</td>
</tr>
<tr>
<td>High-definition video</td>
<td>2500 MB/hr</td>
</tr>
<tr>
<td>4K video</td>
<td>5850 MB/hr</td>
</tr>
<tr>
<td>Online games</td>
<td>12 MB/hr</td>
</tr>
</table>
<p>
<label>1 MB = 1,024KB</label>
<label>1 GB = 1,024MB</label>
</p>
</div>
<div class="usage-right">
<p>*These are just estimates and data transfer amounts will vary. Video applications and settings along with network conditions may impact the amount of data consumed. Downloads and buffers, such as streaming music and video, will bill for the entire download. Please regularly check and manage your usage.</p>
</div>
</div>
</div>
</div>
</div>
答案 0 :(得分：0)
这很简单 您应该为默认选项定义变量 在函数中，您可以将所有默认选项设置为图表：
private List<Product> mMainList = new ArrayList<>();
private List<Product> mCopyList;
mMainList.add(new Product(true,"First"));
mMainList.add(new Product(true,"Second"));
mMainList.add(new Product(true,"Third"));