有没有人能帮我一下这个如何用下面的数据来实现。
[
{"IronType":"Adapter","Manufacturer":"FMC","TotalFailed":56,"TotalPassed":1016,"TotalProcessed":1072,"FailedVTotalInspected":5.22},
{"IronType":"Adapter","Manufacturer":"SPM","TotalFailed":36,"TotalPassed":613,"TotalProcessed":649,"FailedVTotalInspected":5.55},
{"IronType":"Swivel","Manufacturer":"FMC","TotalFailed":984,"TotalPassed":5094,"TotalProcessed":6078,"FailedVTotalInspected":16.19},
{"IronType":"Swivel","Manufacturer":"SPM","TotalFailed":299,"TotalPassed":1051,"TotalProcessed":1350,"FailedVTotalInspected":22.15}
]
给定json数据，您可以筛选要在dataSource对象中显示的IronType：
var dsCertpData = new kendo.data.DataSource({
data: theData,
filter: { field: "IronType", operator: "eq", value: "Swivel" }
});
$("#chart1").kendoChart({
theme: "Fiori",
dataSource: dsCertpData,
legend: {
position: "right",
visible: true,
},
seriesColors: ["#95B3D7","#C3D69B","#D99694","#7D60A0"],
series: [
{
type: "column",
categoryField: "Manufacturer",
field:"TotalProcessed",
name: "Total Processed",
axis: "Main",
},
{
type: "column",
categoryField: "Manufacturer",
field:"TotalPassed",
name: "Total Passed",
axis: "Main"
}, {
type: "column",
categoryField: "Manufacturer",
field:"TotalFailed",
name: "Total Failed",
axis: "Main"
},
{
type: "line",
categoryField: "Manufacturer",
field:"FailedVTotalInspected",
name: "% failed",
axis: "percent",
}
],
categoryAxis: {
title: { text: "Swivel" },
axisCrossingValues: [ 10, 0],
},
valueAxes: [
{
name: "percent",
min: 0,
max: 100,
},
{
name: "Main",
},
],
tooltip: {
visible: true,
template: "${series.name} : ${value}"
}
});
然后每次选择新的IronType时，更新图表：
var value = $("#IronTypeFilter").val();
dsCertpData.filter( { field: "IronType", operator: "eq", value: value });
var chart = $("#chart1").data("kendoChart");
chart.options.categoryAxis.title.text = value;
chart.redraw();
工作演示
