剑道图表显示问题

Question

​

我有一个剑道图和下面的Json数据样本，我必须显示两个X轴上的数据，一个是铁制的，另一个是manufacturer.Let的，我用一个例子来解释。我有铁的类型，如旋转和Adapter.And制造商，如扫描电子显微镜和FMC。现在，在X轴的Swivel Iron类型下，我必须显示FMC ans SPM条形图，显示总失败数、总通过数和总处理数。和一个基于百分比的折线图。

谁可以帮助我如何实现与以下数据。

[
  {"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();

Working