kendo 条形图读取从不联系服务器(禁用缓存)
kendo bar chart read never contatct server (cache disabled)
当某些外部事件被触发时,我需要手动调用刷新图表数据源:
$(".k-chart").data("kendoChart").dataSource.read();
每次我调用 read 时,都会调用数据源 requestEnd,但是,显然事件处理程序对象上没有可用的响应。
我看不到任何错误,但在 datasource.transport.read.url 中指定的网络服务在第一次请求后从未到达。
图表仅在第一次通过服务器加载数据,这里是配置:
$scope.chartopts = {
charArea: {
height: 500,
},
title: {
position: "bottom",
text: "A / B"
},
legend: {
position: "top",
visible: true
},
chartArea: {
background: "transparent"
},
seriesDefaults: {
labels: {
visible: true,
background: "transparent",
template: "#= category #: (#= value #)",
align: "alignColumn"
}
},
series: [{
startAngle: 180,
categoryField: 'category',
field: 'value',
padding: 0
}],
dataSource: {
transport: {
read: {
url: wsurl,
type: 'POST',
data: {id: id},
dataType: 'json',
cache: false,
}
},
requestEnd: function(e){
if(e.type == 'read' && e.response){//works only the first time
var rsp = [];
var a = e.response.a;
var b = e.response.b;
var tot = a + b;
if(tot!=0){
var pa = parseFloat(100 * a / tot).toFixed(2);
var pb = parseFloat(100 * b / tot).toFixed(2);
}
else {
pa = 0;
pb = 0;
}
rsp = [{
category: "A",
value: a,
color: "#66FF99",
},{
category: "B",
value: b,
color: "#FF9900",
}];
this.data(rsp);
}
}
},
tooltip: {
visible: true,
},
valueAxis: {
majorGridLines: {
visible: false
},
visible: false
},
categoryAxis: {
majorGridLines: {
visible: false
},
line: {
visible: false
}
}
};
这是标签:
<div kendo-chart k-options='chartopts' ></div>
我也试过在图表上调用刷新方法。屏幕上的小部件已刷新,但数据源保持不变。
解决了在数据源配置对象中定义架构 属性 和 adapting/moving 从 requestEnd 到 schema.parse 方法的所有逻辑。
dataSource: {
transport: {
read: {
url: wsurl,
type: 'POST',
data: {id: id},
dataType: 'json',
cache: false,
}
},
schema: {
data: 'results',
total: 'total',
parse: function(data){
var rsp = [];
var a = data.a;
var b = data.b;
var tot = a + b;
if(tot!=0){
var pa = parseFloat(100 * a / tot).toFixed(2);
var pb = parseFloat(100 * b / tot).toFixed(2);
}
else {
pa = 0;
pb = 0;
}
rsp = {results: [{
category: "A",
value: a,
color: "#66FF99",
},{
category: "B",
value: b,
color: "#FF9900",
}], total: 2};
return rsp;
}
}
}
每次我需要运行 datasource.read(),我也刷新图表:
var chart = $(".k-chart").data("kendoChart");
chart.dataSource.read();
chart.refresh();
当某些外部事件被触发时,我需要手动调用刷新图表数据源:
$(".k-chart").data("kendoChart").dataSource.read();
每次我调用 read 时,都会调用数据源 requestEnd,但是,显然事件处理程序对象上没有可用的响应。
我看不到任何错误,但在 datasource.transport.read.url 中指定的网络服务在第一次请求后从未到达。
图表仅在第一次通过服务器加载数据,这里是配置:
$scope.chartopts = {
charArea: {
height: 500,
},
title: {
position: "bottom",
text: "A / B"
},
legend: {
position: "top",
visible: true
},
chartArea: {
background: "transparent"
},
seriesDefaults: {
labels: {
visible: true,
background: "transparent",
template: "#= category #: (#= value #)",
align: "alignColumn"
}
},
series: [{
startAngle: 180,
categoryField: 'category',
field: 'value',
padding: 0
}],
dataSource: {
transport: {
read: {
url: wsurl,
type: 'POST',
data: {id: id},
dataType: 'json',
cache: false,
}
},
requestEnd: function(e){
if(e.type == 'read' && e.response){//works only the first time
var rsp = [];
var a = e.response.a;
var b = e.response.b;
var tot = a + b;
if(tot!=0){
var pa = parseFloat(100 * a / tot).toFixed(2);
var pb = parseFloat(100 * b / tot).toFixed(2);
}
else {
pa = 0;
pb = 0;
}
rsp = [{
category: "A",
value: a,
color: "#66FF99",
},{
category: "B",
value: b,
color: "#FF9900",
}];
this.data(rsp);
}
}
},
tooltip: {
visible: true,
},
valueAxis: {
majorGridLines: {
visible: false
},
visible: false
},
categoryAxis: {
majorGridLines: {
visible: false
},
line: {
visible: false
}
}
};
这是标签:
<div kendo-chart k-options='chartopts' ></div>
我也试过在图表上调用刷新方法。屏幕上的小部件已刷新,但数据源保持不变。
解决了在数据源配置对象中定义架构 属性 和 adapting/moving 从 requestEnd 到 schema.parse 方法的所有逻辑。
dataSource: {
transport: {
read: {
url: wsurl,
type: 'POST',
data: {id: id},
dataType: 'json',
cache: false,
}
},
schema: {
data: 'results',
total: 'total',
parse: function(data){
var rsp = [];
var a = data.a;
var b = data.b;
var tot = a + b;
if(tot!=0){
var pa = parseFloat(100 * a / tot).toFixed(2);
var pb = parseFloat(100 * b / tot).toFixed(2);
}
else {
pa = 0;
pb = 0;
}
rsp = {results: [{
category: "A",
value: a,
color: "#66FF99",
},{
category: "B",
value: b,
color: "#FF9900",
}], total: 2};
return rsp;
}
}
}
每次我需要运行 datasource.read(),我也刷新图表:
var chart = $(".k-chart").data("kendoChart");
chart.dataSource.read();
chart.refresh();