如何更新charts.JS值字段中的JS变量
How to update JS variable in value field of charts.js?
在页面加载时,会绘制一个charts.js图表(详细内容如下)。我还有一些复选框,比如。。。
<input type="checkbox" id="something" name="something" value="25" data-val="25" checked="checked" class="option">
<label for="something">Something</label>
<input type="checkbox" id="other" name="other" value="5" data-val="5" checked="checked" class="option">
<label for="other">Other</label>
我有这个JS来创建变量,然后查看复选框是选中还是未选中,然后保持值不变或给它一个新的值0。我还有一个updateBreakdown()函数,它可以破坏图表并重新绘制
下面是我的charts.js图表代码。请注意,数据使用我的变量作为"值"。页面加载时,图表创建良好。当我取消选中一个框,例如"something"框时,something变量的值应该更改为0,因此,当重新绘制时,它不应该占用图表上的任何空间。但它总是以25出现。
所以我可能错了,但我觉得我最初声明变量的方式和/或保持变量范围的方式有问题吗?
或者我只需要做一些不同的事情,让charts.js数据"刷新"用作值的变量?
有人看到我哪里错了吗?
<script>
var something=25;
var other=5;
$( document ).ready(function() {
$('.option').on('change', function() {
if ($('#something').is(':checked')) {
var something = 25;
} else {
var something = 0;
}
if ($('#other').is(':checked')) {
var other= 5;
} else {
var other= 0;
}
updateBreakdown();
});
});
function updateBreakdown() {
// create the graph from scratch
doughnutChart.destroy()
doughnutChart = new Chart(ctx).Doughnut(doughnutData, {
percentageInnerCutout: 55
});
}
</script>
<canvas id="breakdown" width="500" height="500"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<script>
var ctx = document.getElementById("breakdown").getContext("2d");
var doughnutData = [
{
value: something,
label: 'My something Label',
color: '#811BD6'
},
{
value: other,
label: 'My other label',
color: '#D18177'
}
];
var doughnutChart = new Chart(ctx).Doughnut(doughnutData, {
percentageInnerCutout: 55
});
</script>
在创建新图表之前,请尝试将其新配置数据提供给甜甜圈数据。
function updateBreakdown() {
// create the graph from scratch
doughnutChart.destroy();
var doughnutData = [
{
value: something,
label: 'My something Label',
color: '#811BD6'
},
{
value: other,
label: 'My other label',
color: '#D18177'
}
];
doughnutChart = new Chart(ctx).Doughnut(doughnutData, {
percentageInnerCutout: 55
});
}
并做出这些改变:
if ($('#something').is(':checked')) {
//var something = 25;//replace these
something = 25;//with these
} else {
//var something = 0;
something = 0;
}
if ($('#other').is(':checked')) {
//var other= 5;
other= 5;
} else {
//var other= 0;
other= 0;
}
相关文章:
- 带有let的JS/EECMAScript6私有字段的模式
- JS动态添加字段-删除按钮不起作用
- 我怎么能让流星简单模式中的一个字段等于一个js变量,并且仍然让用户填写简单模式的其余部分
- 处理字段中带有换行符的csv文件-node.js
- 无法格式化keystone.js中的嵌套日期字段
- 表单使用js、html,而不是隐藏字段
- MaskMoney.js无法处理动态添加字段
- 在Drupal7中扩展字段集时,修改collapse.js以从xml获取附加数据
- Ember js 2计数相关字段(hasMany)
- 如何将typeahead.js(Bloodhound)添加到jQuery动态创建的字段中
- 角度 JS 动态选项卡字段
- Javascript 单击html字段值而不编辑.js文件
- 在 ember.js 中自定义输入字段的最佳实践
- Angular JS字段仅当其值大于tan零时有效
- JS 字段验证 - 循环遍历对象,每个字段有三个数据注意事项
- Remote: true形式避免js字段验证
- 致命错误:CALL_AND_RETRY_2分配失败-进程在预处理我的js字段时内存不足
- 如何成功地设置一个值在JS字段?试穿了.专注但没有运气
- JS字段渲染返回标准字段渲染
- 抓取Parsley JS字段错误和更新CSS