javascript - 条形图:如何更新图表?
问题描述
我正在将此插件用于条形图。我需要按天、周和月更新值,但插件内的更新功能不起作用。
HTML
<div id="chart">
<h2 class="section-title">Images processed</h2>
<div class="cal-options">
<span>Day</span>
<span>Week</span>
<span class="active">Month</span>
</div>
</div>
JS
if($('#chart').length){
$('#chart').barChart({
height : 388,
bars : [
{
vertical: true,
drawToolTip: false,
stepsCount : 5,
barGap : 5,
name : 'Dataset 1',
values : [
["May",33],
["June",11],
["July",23],
["August",16],
["September",28],
["October",21],
["November",32],
["December",19],
["January",13],
["February",19],
["March",24],
["April",18],
]
},
{
name : 'Dataset 2',
values : [
["May",5],
["June",5],
["July",5],
["August",5],
["September",5],
["October",5],
["November",5],
["December",5],
["January",5],
["February",5],
["March",5],
["April",5],
]
},
],
colors: [
"#FF7D9C", "#6BBEB6", "#000000"
]
});
}
$(".cal-options span").each(function(){
$(this).click(function(){
$(".cal-options span").removeClass("active");
$(this).addClass("active");
var newoptions = {
bars : [
{
vertical: true,
drawToolTip: false,
stepsCount : 5,
barGap : 5,
name : 'Dataset 1',
values : [
["new-May",33],
["new-June",11],
["new-July",23],
["new-August",16],
["new-September",28],
["new-October",21],
["new-November",32],
["new-December",19],
["new-January",13],
["new-February",19],
["new-March",24],
["new-April",18],
]
},
{
name : 'Dataset 2',
values : [
["new-May",5],
["new-June",5],
["new-July",5],
["new-August",5],
["new-September",5],
["new-October",5],
["new-November",5],
["new-December",5],
["new-January",5],
["new-February",5],
["new-March",5],
["new-April",5],
]
},
],
}
// $("#chart").barChart({
// update: function(){};
// })
});
});
单击日、周、月按钮时无法更新图表。有人可以帮忙吗?
解决方案
使用具有新值的类型函数绘制图形。以下代码显示了如何执行此操作。
var options = [{
vertical: true,
drawToolTip: false,
stepsCount: 5,
barGap: 5,
name: 'Dataset 1',
values: [
["May", 33],
["June", 11],
["July", 23],
["August", 16],
["September", 28],
["October", 21],
["November", 32],
["December", 19],
["January", 13],
["February", 19],
["March", 24],
["April", 18],
]
},
{
name: 'Dataset 2',
values: [
["May", 5],
["June", 5],
["July", 5],
["August", 5],
["September", 5],
["October", 5],
["November", 5],
["December", 5],
["January", 5],
["February", 5],
["March", 5],
["April", 5],
]
},
]
if ($('#chart').length) {
DrawChar(options)
}
$(".cal-options span").each(function() {
$(this).click(function() {
$(".cal-options span").removeClass("active");
$(this).addClass("active");
var newoptions = [{
vertical: true,
drawToolTip: false,
stepsCount: 5,
barGap: 5,
name: 'Dataset 1',
values: [
["new-May", 33],
["new-June", 11],
["new-July", 23],
["new-August", 16],
["new-September", 28],
["new-October", 21],
["new-November", 32],
["new-December", 19],
["new-January", 13],
["new-February", 19],
["new-March", 24],
["new-April", 18],
]
},
{
name: 'Dataset 2',
values: [
["new-May", 5],
["new-June", 5],
["new-July", 5],
["new-August", 5],
["new-September", 5],
["new-October", 5],
["new-November", 5],
["new-December", 5],
["new-January", 5],
["new-February", 5],
["new-March", 5],
["new-April", 5],
]
},
];
DrawChar(newoptions);
});
});
function DrawChar(chartoptions) {
$('#chart').barChart({
height: 388,
bars: chartoptions,
colors: [
"#FF7D9C", "#6BBEB6", "#000000"
]
});
}
推荐阅读
- karate - 处理来自 ADFS 的 JWT 不记名令牌
- android - Android Studio-NDK 错误:原因:error=13,权限被拒绝
- reactjs - 是否可以在 antdesign datepicker 中显示 2 个月?
- javascript - 查明调用 Javascript 的位置?
- ios - 如何在 UIButton 中设置图像大小?
- google-apps-script - Google Apps 脚本 - 设置固定长度的数字,以便在每次提交表单时在 Google 表格中自动增加 ID 号
- ios - UISearchBar 文本在 rtl 语言上不是从右到左开始
- javascript - 我需要 bindActionCreators 吗?
- android-studio - 模拟器:模拟器:错误:检测到挂起的线程“QEMU2 主循环”。15000 毫秒无响应
- java - Spring Boot - Streaming Apache FileUpload - 流意外结束