Question

我正试图从剑道饼图到剑道条形图，我的问题是条形图只返回一个数据。

CSHTML `

<div id="pieEmployeeContainer">
    @(Html.Kendo().Chart<SalesChart>().Name("pieEmployee").HtmlAttributes(new { style = "width: 90%;", @class = "fpos-chart" })
        .Title("Top 10")
        .Legend(false)
        .Theme("bootstrap")
                .DataSource(ds => ds.Read("SM_GetSalesByEmployees", "Home"))
        .Series(s => s
            .Pie(m => m.Total, m => m.Category)
            .Padding(0)
        )

        .Tooltip(t => t
            .Visible(true)
            .Format("{0:c}")
            .Template("#= category # <br /> #= kendo.format('{0:c}', value) # (#= kendo.format('{0:p}', percentage)#)")
        )

        .Events(e => e.SeriesClick("getByEmployee"))
        .Deferred()
    )
</div>

`

控制器

        public ActionResult SM_GetSalesByEmployees()
    {
        List<SalesChart> items;
        List<SalesChart> salesByEmpl;

        using (StreamReader r = new StreamReader("C:\\Development\\Back Office Web\\Sandbox\\BackOffice.Web\\BackOffice.Web\\Content\\Data\\SalesByEmployee.json"))
        {
            string json = r.ReadToEnd();
            items = JsonConvert.DeserializeObject<List<SalesChart>>(json);
            salesByEmpl = items.GroupBy(l => l.EmployeeName)
                      .Select(lg =>
                            new SalesChart
                            {
                                Category = lg.Key,                                    
                                Total = lg.Sum(w => w.Total)                                    
                            }).ToList();
        }
        return new CustomJsonResult
        {
            Data = salesByEmpl
        };
    }
    script
        function getByEmployee(e)
    {
        var categorySelected = e.category;
        var chart = $("#pieEmployee").data("kendoChart");
        $.post("Home/GetSalesByEmployee?EmpName=" + categorySelected, function (results) {
            chart.setDataSource(new kendo.data.DataSource({ data: results }));
        });

        chart.options.series[0].type = "bar";
        chart.options.series[0].ValueAxis = "${Total}";
        chart.options.series[0].categoryAxis = "{Category}";
        chart.options.categoryAxis.baseUnit = "months";
        chart.refresh();
    }

我没有足够的声誉来发布图片，抱歉。条形图仅获取一个数据点并显示该数据点，而不是显示所有数据。非常感谢任何帮助。

Answer 1

我无法构建任何测试内容，但是从快速查看它，饼图的数据格式需要更改。它需要以百分比表示（整个系列需要= 100），因此您需要在视图或控制器中转换数据。

剑道饼图到条形图

1 个答案: