【发布时间】：2014-02-21 04:41:26
【问题描述】：
我在我的应用项目中使用了莫里斯图来显示有关销售数量的一些详细信息。
执行 AJAX 请求后，图表只显示了一半。语法如下：
var chartBahan = Morris.Bar ({
element: 'morris-analytics-bahan',
xkey: '2',
ykeys: ['3'],
labels: ['Quantity Bahan'],
resize: false,
gridEnabled: true
});
//getting the morris chart over bahan and karakteristik
function getBahanPotensial(kode){
//ajax call
$.ajax({
type:"POST",
async: false,
url:"<%= request.getContextPath()%>/GenerateListBahanPotensial",
data:{
kode:kode
},
success: function(data){
chartBahan.setData($.parseJSON(data));
chartBahan.redraw();
},
error:function(msg){
alert("Data Failed to Analyze" + msg);
}
});
}
var chartKarakter = new Morris.Bar ({
element: 'morris-analytics-karakter',
xkey: '2',
ykeys: ['3'],
labels: ['Karakter Quantity'],
resize: true
});
function getKarakterPotensial(kode){
//ajax call
$.ajax({
type:"POST",
async: false,
url:"<%= request.getContextPath()%>/GenerateListKarakterPotensial",
data:{
kode:kode
},
success:function(data){
chartKarakter.setData($.parseJSON(data));
chartKarakter.redraw();
},
error:function(msg){
alert("Data Failed to Analyze" + msg);
}
});
}
我从另一个函数执行上述函数，比如说 doProcess()
function sendRequest(thecode){
if(thecode === ""){ alert("Tolong Input Kode Produk");}
else {
var kodebarang = thecode;
}
//executing AJAX call.
$.ajax({
type:"POST",
async: false,
url:"<%= request.getContextPath()%>/GenerateAnalytics",
data:{
kodebarang:kodebarang
},
success:function(msg){
$('#result_analysis').show();
$('#navigation_button').show();
new Morris.Bar ({
element: 'morris-analytics-bar',
data: $.parseJSON(msg),
xkey: '1',
ykeys: ['2', '3'],
labels: ['Sales Area', 'Tingkat Penjualan'],
barRatio: 0.4,
xLabelAngle: 0,
hideHover: 'auto'
});
//execute the morris chart others !! PENTING
var kodeb = $('#bahan_id').val();
var kodek = $('#karakteristik_id').val();
getBahanPotensial(kodeb);
getKarakterPotensial(kodek);
},
error:function(msg){
alert("Data Failed to Analyze" + msg);
}
});
}
但问题是，当我在成功回调中创建莫里斯图表时
success:function(msg){
$('#result_analysis').show();
$('#navigation_button').show();
new Morris.Bar ({
element: 'morris-analytics-bar',
data: $.parseJSON(msg),
xkey: '1',
ykeys: ['2', '3'],
labels: ['Sales Area', 'Tingkat Penjualan'],
barRatio: 0.4,
xLabelAngle: 0,
hideHover: 'auto'
});
图表正确显示。这是屏幕截图：
但是当我使用模板绘制图表时（在成功回调之外），另一个图表已损坏
这是截图
然后，我有下拉列表来根据特定参数重新生成图表，图表正确显示（所有数据显示）但图表只有半页。这是屏幕截图：
有什么想法吗？
更新
我的意思是模板是这样的代码：
var chartBahan = Morris.Bar ({
element: 'morris-analytics-bahan',
xkey: '2',
ykeys: ['3'],
labels: ['Quantity Bahan'],
resize: false,
gridEnabled: true
});
而调用模板的方法是
success:function(data){
chartBahan.setData($.parseJSON(data));
chartBahan.redraw();
},
右图是第一张截图。它比其他两个更宽。
更新 2
莫里斯创建的图表仍然出错:(
这是屏幕截图。
【问题讨论】：
-
如果您在 3 个成功回调中绘制所有 3 个图表，“成功回调之外”在哪里？您所说的“模板”一词是什么意思，它在代码中的什么位置？最后一个屏幕截图在我看来还可以，但如果有问题，请详细说明它的外观。
-
@vorrtex 请参阅更新部分。谢谢。
标签： javascript charts morris.js