asp.net-mvc - 如何在 Asp.net mvc 上的 Syncfusion 条形图中绑定数据库

Question

我尝试使用其文档中的代码，但即使它是静态数据，它仍然没有运行。这是我使用过的链接上的代码，但它没有连接到数据库。以下是我使用的代码的图片：

//CS File(I JUST PUT HERE)

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Charts;

namespace EJ2MVCSampleBrowser.Controllers.Chart
{
    public partial class ChartController : Controller
    {
        // GET: RoundedColumn
        public ActionResult RoundedColumn()
        {
            List<RoundedColumnChartData> chartData = new List<RoundedColumnChartData>
            {
                  new RoundedColumnChartData { x= "BGD", y= 106, text= "Bangaladesh" },
                  new RoundedColumnChartData { x= "BTN", y= 103, text= "Bhutn" },
                  new RoundedColumnChartData { x= "NPL", y= 198, text= "Nepal" },
                  new RoundedColumnChartData { x= "THA", y= 189, text= "Thiland" },
                  new RoundedColumnChartData { x= "MYS", y= 250, text= "Malaysia" }
            };
            ViewBag.dataSource = chartData;
            ViewBag.font = new { fontWeight = "600", color = "#ffffff" };
            return View();
        }
        public class RoundedColumnChartData
        {
            public string x;
            public double y;
            public string text;
        }
    }
}

//CSHTML File (I JUST PUT HERE)

<script src="~/Scripts/theme-color.js"></script>
    <div class="control-section">
        <div style="text-align:center">

            @Html.EJS().Chart("container").Series(series =>
       {
           series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).XName("x").YName("y")
           .CornerRadius(cr=>cr.BottomLeft(10).BottomRight(10).TopLeft(10).TopRight(10))
           .Marker(mr => mr.DataLabel(dl => dl.Visible(true).Position(Syncfusion.EJ2.Charts.LabelPosition.Top).Font(ff => ff.FontWeight("600").Color("#ffffff"))))
           .DataSource(ViewBag.dataSource).Name("Tiger").Add();

       }).PrimaryXAxis(px => px.Interval(1).MajorGridLines(mg=>mg.Width(0))
       .LabelStyle(ls=>ls.Color("#ffffff")).TickPosition(Syncfusion.EJ2.Charts.AxisPosition.Inside)
       .LabelPosition(Syncfusion.EJ2.Charts.AxisPosition.Inside).ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
            ).PrimaryYAxis(py => py.Minimum(0).Maximum(300).Interval(50)
            .MajorGridLines(mg => mg.Width(0)).LabelStyle(ls=>ls.Color("transparent"))
            .MajorTickLines(mg => mg.Width(0)).LineStyle(mg => mg.Width(0))
            ).Title("Trade in Food Groups").ChartArea(area => area.Border(br=>br.Color("transparent"))
            ).Tooltip(tt => tt.Enable(false)).LegendSettings(lg => lg.Visible(false)
            ).Load("load").PointRender("pointRender").Loaded("loaded").Render()
        </div>
        <div style="float: right; margin-right: 10px;">
            Source:
            <a href="https://blogs.scientificamerican.com/extinction-countdown/tiger-populations-increasing/" target="_blank">blogs.scientificamerican.com</a>
        </div>
    </div>
  
  
  <script>


        
        var pointRender = function (args) {
            var selectedTheme = location.hash.split('/')[1];
            selectedTheme = selectedTheme ? selectedTheme : 'Material';
            if (selectedTheme && selectedTheme.indexOf('fabric') > -1) {
                args.fill = fabricColors[args.point.index % 10];
            }
            else if (selectedTheme === 'material') {
                args.fill = materialColors[args.point.index % 10];
            }
            else {
                args.fill = bootstrapColors[args.point.index % 10];
            }
        };
        var count = 0;
        var loaded = function (args) {
            args.chart.loaded = null;
            setInterval(
                function () {
                    if (count === 0) {
                        args.chart.series[0].dataSource = [
                            { x: 'Tea', y: 206, text: 'Bangaladesh' },
                            { x: 'Misc', y: 123, text: 'Bhutn' },
                            { x: 'Fish', y: 48, text: 'Nepal' },
                            { x: 'Egg', y: 240, text: 'Thiland' },
                            { x: 'Fruits', y: 170, text: 'Malaysia' }
                        ];
                        args.chart.animate();
                        count++;
                    }
                    else if (count === 1) {
                        args.chart.series[0].dataSource = [
                            { x: 'Tea', y: 86, text: 'Bangaladesh' },
                            { x: 'Misc', y: 173, text: 'Bhutn' },
                            { x: 'Fish', y: 188, text: 'Nepal' },
                            { x: 'Egg', y: 109, text: 'Thiland' },
                            { x: 'Fruits', y: 100, text: 'Malaysia' }
                        ];
                        args.chart.animate();
                        count++;
                    }
                    else if (count === 2) {
                        args.chart.series[0].dataSource = [
                            { x: 'Tea', y: 156, text: 'Bangaladesh' },
                            { x: 'Misc', y: 33, text: 'Bhutn' },
                            { x: 'Fish', y: 260, text: 'Nepal' },
                            { x: 'Egg', y: 200, text: 'Thiland' },
                            { x: 'Fruits', y: 30, text: 'Malaysia' }
                        ];
                        args.chart.animate();
                        count = 0;
                    }
                }, 2000);
        }
    </script>
}

标签： asp.net-mvcchartssyncfusion