1

Kendo-DataViz で動作する POCO クラスを作成する際に 1 つの問題があります。

MVC ラッパーを使用して積み上げグラフを作成したいのですが、Kendo のサンプルでは次のような静的な値が表示されます。

     .Column(new int[] { 1100941, 1139797, 1172929, 1184435, 1184654 }).Stack(true)
     .Column(new int[] { 810169, 883051, 942151, 1001395, 1184654  }).Stack(true)

これにより、各バーが 1 つ以上のデータで積み上げられた 5 つのバーが作成され、int 配列の各値は異なるバーに対応し、すべての配列の各インデックスは同じバーに対応します

つまり 、 1100941 と810169は最初のバーbar1に対応します。

この静的データを POCO クラスにモデル化し、データを入力する方法。

私は以下のようにPOCOを作成しました

    public class TroubleFound
    {
    //Service center Name for which trouble is found
    public string ServiceCenterName { get; set; }
    //Which type of trouble is found
    public string TroubleFoundName { get; set; }
    //total count of trouble found
    public List<int> TroubleFoundCount { get; set; }
    }

ただし、バーごとに1つの列を作成するのではなく、単一のバーに積み重ねるため、機能していません

    series.Bar(data.TroubleFoundCount)

POCOを作成し、Kendo-Datavizに従って入力する方法

実際に開発したいものについてはhttp://demos.kendoui.c​​om /dataviz/bar-charts/stacked-bar.html を参照してください。

4

1 に答える 1

0

私は最近、非常に似たようなことをしなければなりませんでしたが、列を使用しました。他の変更を加えることなく、系列タイプを列から棒に切り替えることができると思います。使用したモデルは次のとおりです。

public class KendoStackedColumnChartModel
{
    public string Title { get; set; }

    public IEnumerable<KendoStackedColumnModel> StackedColumns { get; set; }

    public class KendoStackedColumnModel
    {
        public string StackName { get; set; }
        public string Colour { get; set; }

        public IEnumerable<KendoColumnModel> Columns { get; set; }

        public class KendoColumnModel
        {
            public decimal Value { get; set; }
            public string Category { get; set; }
        }

    }

}

そしてラッパーで：

        .Series(series =>
        {
            foreach (WebUI.Models.KendoStackedColumnChartModel.KendoStackedColumnModel stacked in Model.StackedColumns)
            {
                series.Column(stacked.Columns).CategoryField("CategoryLabel").Field("Value").Name(stacked.StackName).Color(stacked.Colour);
            }
        } 
    )
    .SeriesColors(new string[] { "#20BDFF", "#84DAFF", "#FFCD8A", "#FE9915", "#FF6633" })

これが他の誰かが時間を節約するのに役立つことを願っています...

于 2014-05-07T00:56:46.990 に答える