剑道图表显示问题 [英] Kendo chart display issue

问题描述

我有一个剑道图，带有下面的Json数据示例.我必须像两个X轴上那样显示数据，一个是Iron Type，另一个是制造商.让我用一个例子来解释.我有Swivel和Adapter的铁类型，还有SPM和FMC的制造商.现在，在X轴上的旋转铁心"类型下，我必须显示FMC和SPM条形图，以及失败总数"，通过总数"和已处理总数".和一个基于百分比的折线图.

I have a kendo-chart with the below Json data sample.I have to show the data like in the two X- Axis one with Iron Type and other with manufacturer.Let me explain with an example. I have iron types as Swivel and Adapter.And manufacturers as SPM and FMC. Now in the X-axis under Swivel Iron type i have to show FMC ans SPM bar chart against Total Failed,Total passed and Total Processed. and one line chart based on percentage.

有人可以在以下数据方面帮助我吗?

Can anyone help me on this how to achieve with the below data.

[
  {"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:

Given your json data, you can filter for the IronType you want to display in the dataSource object:

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时，更新图表:

Then each time a new IronType is selected, update the chart:

    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 DEMO

这篇关于剑道图表显示问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！