use*_*545 2 javascript visual-studio-2010 kendo-ui
我有一个带有组字段的kendo图表,还有带有3个复选框的树视图.我想用复选框检查事件过滤图表.但是在我的应用程序中它不工作.请任何人帮助我.我的图表代码是
$("#myChart").kendoChart({
theme: $(document).data("kendoSkin") || "default",
dataSource: {
data: tmpData2,
sort: {
field: "date",
dir: "asc"
},
group: {
field: "close"
},
schema: {
model: {
fields: {
date: {
type: "date" }
}
}
}
},
title: {
text: "My Date-aware Chart"
},
legend: {
position: "bottom"
},
seriesDefaults: {
type: "line",
labels: {
visible: true
},
missingValues: "gap"
},
series: [{
name: "Close",
field: "closeA",
axis: "A"
},
{
name: "Close",
field: "closeb",
axis: "B"
},
{ name: "Close",
field: "closec",
axis: "B"
}],
valueAxis: [{
name: "A",
labels: {
format: "{0}%"
}
},
{
name: "B",
labels: {
format: "{0}D"
}
}],
categoryAxis: {
type: "Date",
field: "date",
axisCrossingValue: [0, 1000]
}
});
Run Code Online (Sandbox Code Playgroud)
我的树视图代码是
$("#treeview").on("change", function (e) {
console.log("click", multi.text());
var selected = multi.text().split(",");
console.log("multi", selected);
var condition = {
logic : "or",
filters: [
]
};
$.each(selected, function (idx, elem) {
condition.filters.push({ field: " close", operator: "eq", value: elem.trim() });
});
mychart.dataSource.filter(condition);
});
Run Code Online (Sandbox Code Playgroud)
我想我现在明白你的要求是什么了.检查树视图时,您需要从图表中删除系列.这应该通过从图表配置中删除系列然后调用refresh方法来实现:
// All series
var series = [{
name: "Close",
field: "closeA",
axis: "A"
},
{
name: "Close",
field: "closeb",
axis: "B"
},
{
name: "Close",
field: "closec",
axis: "B"
}
];
$("#treeview").on("change", function (e) {
var chart = $("#myChart").data("kendoChart");
// Start with empty series
var checkedSeries = [];
// Iterate all checked checkboxes in the treeview
$("#treeview").find(":checked").each(function() {
// Get the checked node's text - it is the grand parent of the checkbox element
var nodeText = $(this).parent().parent().text();
// Find the series whose field is the same as the node's text
$.each(series, function(index, series) {
if (series.field == nodeText) {
// add it to the checkedSeries array
checkedSeries.push(series);
}
});
});
// Set the chart series
chart.options.series = checkedSeries;
// Refresh the chart
chart.refresh();
});
Run Code Online (Sandbox Code Playgroud)
这是更新的jsFiddle:http://jsfiddle.net/RHh67/43/
| 归档时间: |
|
| 查看次数: |
1398 次 |
| 最近记录: |