我有一个带有 5 个可切换选项卡的引导选项卡面板(活动、淡出、淡出、淡出、淡出)
每个选项卡中都包含一个用 Jscript 绘制的 dxchart (devextreme)。
当我的页面完成加载时,在选项卡中找到的带有类 css: 的图形:(处于活动状态)正确显示。但是,如果我在其他选项卡中导航,则不会创建图表。
我调查了这个案例,发现选项卡(淡入淡出)中的图形必须在 tabchanged 事件中创建。
我不太擅长 Jscript,而且我花了很多时间研究代码的每一个细节。我发现并修改了以下内容:
var isShown = false;
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
// e.target // newly activated tab
// e.relatedTarget // previous active tab
DrawChart(); isShown = true;
})
function DrawChart() {
if (isShown)
return;
$("#chartUtilidad").dxChart({
dataSource: chartDataBar,
commonSeriesSettings: {
bar: {
cornerRadius: 10
},
argumentField: 'ano_a'
},
tooltip: {
enabled: true,
format: "fixedPoint",
precision: 2,
},
series: [
{ valueField: 'ing1_f', name: 'Ingreso', type: 'bar', color: '#4F81BC' },
{ valueField: 'cost1_f', name: 'Costo', type: 'bar', color: '#9BBB58' },
{ valueField: 'gastos1', name: 'Gasto', type: 'bar', color: '#23BFAA' },
{ valueField: 'uti1', name: 'Utilidad', type: 'bar', color: '#8064A1' },
],
argumentAxis: {
//tickInterval: { years: 1 },
argumentType: 'string'
},
legend: {
horizontalAlignment: 'center',
font: { color: 'Black', size: 20 },
},
title: {
text: 'Comparativo C$'
},
animation: {
easing: 'easeOutCubic',
duration: 3000
}
});
}
通常,创建图表的代码如下(在“活动”中对我来说效果很好):
$(function () {
$("#chartVentas").dxChart({
dataSource: chartData,
commonSeriesSettings: {
type: "line",
hoverMode: "allArgumentPoints",
selectionMode: "allArgumentPoints",
label: {
visible: false,
},
},
tooltip: {
enabled: true,
format: "fixedPoint",
precision: 2,
//customizeText: function () {
// return this.valueText + ' C$';
//}
},
series: [
{ argumentField: 'argumento1', valueField: 'vtas1', name: '2016', color: '#4f81bc' },
{ argumentField: 'argumento2', valueField: 'vtas2', name: '2015', color: '#bc8a4f' },
],
argumentAxis: {
tickInterval: 1,
},
legend: {
horizontalAlignment: 'center',
font: { color: 'Black', size: 20 },
},
title: 'Cajas vendidas C$',
animation: {
easing: 'easeOutCubic',
duration: 3000
}
});
});
我不知道 tabchanged 事件的代码必须如何构造。
这是 HTML:
<div class="container">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#venta">Ventas</a></li>
<li><a data-toggle="tab" href="#costo">Costos</a></li>
<li><a data-toggle="tab" href="#comparativo">Comparativo</a></li>
<li><a data-toggle="tab" href="#caja">Cajas</a></li>
</ul>
<div class="tab-content">
<div id="venta" class="tab-pane fade in active">
<div id="chartVentas"></div>
</div>
<div id="costo" class="tab-pane fade">
</div>
<div id="comparativo" class="tab-pane fade">
<div id="chartUtilidad"></div>
</div>
<div id="caja" class="tab-pane fade">
</div>
</div>
</div>
Noel,如果问题是未加载非活动选项卡中的地图,请通过添加事件使它们在焦点更改时加载
您需要将事件添加到选项卡。你有很多方法可以做到这一点,
onclick
例如通过 html 直接使用属性。我出于习惯,在这些情况下通过 js/jquery 声明侦听器。
如果你有纯
javascript
/HTML
( ) 看这个例子:DOM
如果有,
JQuery
请查看另一个示例:相反,如果您有 JQuery UI,您可以参加该活动
tabs
(英文链接)让我们看看,在这里你需要知道你正在使用的后端。我找到了这个可能的解决方案:
第一(ASPX):
第二(ASPX):
第三(JavaScript):
参考链接:https ://www.devexpress.com/Support/Center/Question/Details/KA18850
关于您所说的
tabchanged
,在我看来,您需要通过调用以下函数在每个选项卡上添加一个 onclick 事件:“function (s,e) { DrawChart(); isShown = true;}”。作为建议:对此类图表使用 D3.js 或 Google Charts,这两个库都是开源的,免费的,具有出色的文档和良好的支持社区。关于 DevExpress……我对它了解得越多,我就越想从那个框架走得更远,我个人觉得它让我很头疼,尤其是当每个人都想更新时……看看它生成的代码行数和编译器你在 C:\brain 中的内容会从溢出中爆炸(好的,不!)。
好吧,我希望它对你有用,继续努力!