Question

我有一个带有以下Json数据样本的剑道图。我必须显示两个X轴的数据，如铁类型和其他制造商。让我用一个例子来解释。我有铁类型作为Swivel和Adapter.And制造商作为SPM和FMC。现在在Swivel Iron类型的X轴下，我必须显示FMC和SPM条形图，其中包括Total Failed，Total Pass和Total Processed。和一个基于百分比的折线图。

任何人都可以通过以下数据帮我解决这个问题。

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

正在使用 DEMO

剑道图表显示问题

1 个答案: