剑道图表显示问题-Java 学习之路

enter image description here
我有一个带有以下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}
]

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

工作演示

回复于 2024-04-28T18:24:22+08:00

剑道图表显示问题

1 回答

相关问题