jquery - jQuery - 使用原始选项销毁和重建图表
问题描述
我想在单击重置按钮时重置和重建我的图表
我已经建立了一个适合我需要的图表 - 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>
解决方案
这很简单，您应该为默认选项定义一个变量，并在函数中将所有默认选项设置为图表：
defaultOptions = {} // your default options here
function resetOptions(chart) {
chart.options = defaultOptions;
chart.update();
}
推荐阅读
- python - 我收到“[Errno 2] No such file or directory”错误代码，即使我有直接/绝对路径....有什么建议吗？
- python - 如何计算数字数组的对数阶乘
- c++ - lambda 中的“变量阴影”警告（未捕获时）
- python - 将 Mobilenet 模型转换为 TFLite 会更改输入大小
- hyperledger - Hyperledger Composer 无法在 Ubuntu 20.04 上运行
- flutter - Flutter：具有持久性 BottomNavigationBar 的嵌套路由，但没有不必要地构建未选择的页面
- amazon-web-services - Terraform 获得 UnsupportedOperation：Microsoft SQL 尝试启动 amazon-linux 实例时
- javascript - 让 Bootstrap 4 固定导航栏向下滑动并在滚动时变为纯色
- c++ - 无法启动程序“MYPATH.exe”。该系统找不到指定的文件。当我尝试运行一个新的“hello world”控制台应用程序时
- spring-boot - 如何在某个条件下隐藏和显示部分表单？