剑道图显示问题

Question

有没有人能帮我一下这个如何用下面的数据来实现。

[
  {"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}
]

Answer 1

给定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();

工作演示