2012-11-29 15 views
5

Nie jestem pewien, czy jest to możliwe. W moim przykładzie używam json jako źródła, ale może to być dowolny rozmiar. W moim przykładzie na fiddle użyłbym tych danych w sposób wspólny, wiążąc tylko dwie kolumny ProductFamily (xAxis) i Value (yAxis), ale chciałbym móc grupować kolumny za pomocą agregatu.Kendo UI BarChart Data Grouping

W tym przykładzie bez grupowania pokazuje wiele kolumn dla FamilyA. Czy można to zgrupować w JEDNĄ kolumnę i zagregować wartości bez względu na ilość danych?

Więc wynik pokaże jedną kolumnę dla FamilyA o wartości 4850 + 4860 = 9710 itd.?

Problem ze wszystkimi przykładami online polega na tym, że zawsze jest odpowiednia ilość danych dla każdej kategorii. Nie masz pewności, czy to ma sens?

http://jsfiddle.net/jqIndy/ZPUr4/3/

//Sample data (see fiddle for complete sample) 
[{ 
     "Client":"", 
     "Date":"2011-06-01", 
     "ProductNumber":"5K190", 
     "ProductName":"CABLE USB", 
     "ProductFamily":"FamilyC", 
     "Status":"OPEN", 
     "Units":5000, 
     "Value":5150.0, 
     "ShippedToDestination":"CHINA" 
}] 


var productDataSource = new kendo.data.DataSource({ 
    data: dr, 
    //group: { 
    // field: "ProductFamily", 
    //}, 
    sort: { 
    field: "ProductFamily", 
    dir: "asc" 
    }, 
    //aggregate: [ 
    //  { field: "Value", aggregate: "sum" } 
    //], 
    //schema: { 
    // model: { 
    // fields: { 
    //  ProductFamily: { type: "string" }, 
    //  Value: { type: "number" }, 
    // } 
    // } 
    //} 
      }) 

$("#product-family-chart").kendoChart({ 
     dataSource: productDataSource, 
     //autoBind: false, 
     title: { 
      text: "Product Family (past 12 months)" 
     }, 
     seriesDefaults: { 
      overlay: { 
      gradient: "none" 
      }, 
      markers: { 
      visible: false 
      }, 
      majorTickSize: 0, 
      opacity: .8 
     }, 
     series: [{ 
      type: "column", 
      field: "Value" 
     }], 
     valueAxis: { 
      line: { 
      visible: false 
      }, 
      labels: { 
      format: "${0}", 
      skip: 2, 
      step: 2, 
      color: "#727f8e" 
      } 
     }, 
     categoryAxis: { 
      field: "ProductFamily" 
     }, 
     legend: { 
      visible: false 
     }, 
     tooltip: { 
      visible: true, 
      format: "Value: ${0:N0}" 
     } 
     });​ 
+0

Próbuję utworzyć pulpit nawigacyjny, który będzie zawierać kilka wykresów, a aby uzyskać najwyższą responsywność, pomyślałem, że najlepiej jest stworzyć JEDEN duży plik json zawierający wszystkie dane, ale wydaje się, że takie podejście nie jest możliwe. Plik ten można następnie udostępnić wszystkim wykresom, ale ponieważ struktura każdego wykresu jest tak różna, będę musiał utworzyć jeden plik json dla każdego wykresu. – jqIndy

+0

To może Ci pomóc http://jsfiddle.net/v8tsQ/42/ – SimonGates

+0

Problem z tym jest, jeśli masz inny element w jsonie dla tej samej firmy w tym samym kwartale, który będzie wyświetlany jako dodatkowa kolumna na pasku wykres. Jak mogę dodać tę sumę do istniejącego 2011Q2, aby nadal wyświetlał tylko 1 kolumnę o łącznej wartości 1 + 145 = 146? { "CompanyId": 201, "GroupName": "Constellation", "SectionName": "ccif", "FindingQuarter": "2011Q2", "DataElement": "Total", "danych typu" : "", "Razem": 145 }, – jqIndy

Odpowiedz

2

Wykres Kendo UI nie obsługuje wiązania agregatów grupowych. Przynajmniej jeszcze nie.

Moja sugestia jest:

  1. Przenieś łączną definicji, więc w przeliczeniu na grupy:

    group: { 
        field: "ProductFamily", 
        aggregates: [ { 
         field: "Value", 
         aggregate: "sum" 
        }] 
    } 
    
  2. Extract zagregowane wartości w module obsługi Zmiana

    var view = products.view(); 
    var families = $.map(view, function(v) { 
        return v.value; 
    }); 
    var values = $.map(view, function(v) { 
        return v.aggregates.Value.sum; 
    }); 
    
  3. Powiąż ręcznie grupy i kategorie:

    series: [ { 
        type: "column", 
        data: values 
    }], 
    categoryAxis: { 
        categories: families 
    } 
    

demo robocze można znaleźć tutaj: http://jsbin.com/ofuduy/5/edit

Mam nadzieję, że to pomaga.

+0

To jest niesamowite. Dzięki wielkie! – jqIndy