ASP.NET MVC中Syncfusion柱状图数据库绑定方法及静态数据运行异常求助

从你提供的代码来看，有几个常见的问题会导致图表无法正常运行，我来逐个帮你排查修复：

1. 数据模型的字段访问权限问题 #

你的RoundedColumnChartData类使用的是公共字段，而Syncfusion EJ2图表组件在绑定数据时需要的是带有get/set的属性。MVC的ViewBag传递数据时，反射机制对字段的支持不如属性，这会导致组件无法正确读取x、y、text的值。

修复后的模型类：

public class RoundedColumnChartData
{
    public string x { get; set; }
    public double y { get; set; }
    public string text { get; set; }
}

2. 缺失Syncfusion EJ2核心依赖脚本和样式 #

你的CSHTML页面只引入了theme-color.js，但没有加载Syncfusion EJ2的核心脚本、图表模块脚本以及对应的主题样式，这是组件无法初始化的关键原因。

需要在页面头部（比如_Layout.cshtml或者当前CSHTML的头部）添加以下依赖：

<!-- Syncfusion EJ2 主题样式 -->
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" />

<!-- Syncfusion EJ2 核心脚本 -->
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>

注意：如果是本地引用脚本，确保路径正确指向你项目中Syncfusion的脚本文件位置。

3. JavaScript颜色数组未定义的问题 #

你的pointRender函数中使用了fabricColors、materialColors、bootstrapColors数组，但如果theme-color.js没有正确定义这些数组，会抛出JS错误，中断图表渲染。

可以在<script>标签中手动定义这些数组作为临时修复，或者确保theme-color.js文件正确包含这些定义：

// 临时添加颜色数组定义，放在pointRender函数之前
var fabricColors = ["#4A90E2", "#50E3C2", "#B8E986", "#F5A623", "#FF7D7D"];
var materialColors = ["#009688", "#3F51B5", "#E91E63", "#FFC107", "#FF5722"];
var bootstrapColors = ["#0275d8", "#5cb85c", "#5bc0de", "#f0ad4e", "#d9534f"];

var pointRender = function (args) {
    // 原函数代码保持不变
};

4. 页面容器尺寸问题 #

当前图表容器没有设置明确的宽高，可能导致图表无法显示。可以给container所在的父容器添加尺寸样式：

<div class="control-section">
    <div style="text-align:center; width: 800px; height: 500px;">
        @Html.EJS().Chart("container")
        <!-- 后续代码保持不变 -->
    </div>
</div>

修复后的完整CSHTML示例 #

<!-- 添加Syncfusion依赖样式和脚本 -->
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" />
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>

<script src="~/Scripts/theme-color.js"></script>
<div class="control-section">
    <div style="text-align:center; width: 800px; height: 500px;">
        @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: blogs.scientificamerican.com
    </div>
</div>
<script>
// 补充颜色数组定义
var fabricColors = ["#4A90E2", "#50E3C2", "#B8E986", "#F5A623", "#FF7D7D"];
var materialColors = ["#009688", "#3F51B5", "#E91E63", "#FFC107", "#FF5722"];
var bootstrapColors = ["#0275d8", "#5cb85c", "#5bc0de", "#f0ad4e", "#d9534f"];

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>

最后检查步骤 #

1. 确保Syncfusion EJ2的NuGet包已经正确安装到你的ASP.NET MVC项目中
2. 清理项目并重新生成，避免缓存问题
3. 打开浏览器开发者工具（F12），查看Console面板是否有JS错误，根据错误提示进一步排查

内容的提问来源于stack exchange，提问作者boredeggyolk