新手 Syncfusion 图表不显示条形

Question

我是第一次使用 Syncfusion 图表。他们的入门说明非常清晰，我有关于 Blazor 组件的第一个图表。图表网格、标题和 x 轴显示良好，y 轴缩放正确......但是，没有显示条形或线条来显示我的数据。

感谢您的帮助。代码如下。

    @using System.Runtime.CompilerServices
    @using Syncfusion.Blazor
    @using Syncfusion.Blazor.Charts
    @implements IDisposable
    
    <div style="position:absolute; text-align:center; top:0px; left:0px; width:100%; height:100%; font-size:1.2vh;">
        <div style="height:60%;">
            <SfChart Title="Messages Sent/Received">
    
                <ChartPrimaryXAxis Title="Time Interval" ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
    @*            <ChartPrimaryYAxis Title="Messages" ValueType="Syncfusion.Blazor.Charts.ValueType.Double"></ChartPrimaryYAxis>*@
                <ChartTooltipSettings Enable="true"></ChartTooltipSettings>
                <ChartSeriesCollection>
                    <ChartSeries DataSource="@SentMessages" XName="SeriesDate" YName="SeriesYValue" Type="ChartSeriesType.Line">
                    </ChartSeries>
                </ChartSeriesCollection>
    
            </SfChart>
        </div>
    </div>
    
    @code {
        public class SeriesType
        {
            public string SeriesDate  { get; set; }      
            public double SeriesYValue { get; set; }
        }
        public List<SeriesType> SentMessages = new List<SeriesType>
        {
            new SeriesType {SeriesDate="8/1/2023", SeriesYValue=4023},
            new SeriesType {SeriesDate="8/2/2023", SeriesYValue=2123},
            new SeriesType {SeriesDate="8/3/2023", SeriesYValue=1823},
            new SeriesType {SeriesDate="8/4/2023", SeriesYValue=2423},
            new SeriesType {SeriesDate="8/5/2023", SeriesYValue=923}
        };

Answer 1

查询：“图表未显示线条。”对于此查询，该问题可能是由于不正确的脚本引用而发生的。建议您检查该脚本是否在 Blazor Server 的 _Host.cshtml 文件或 Blazor Web Assembly 的 index.html 文件中正确引用。确保正确引用脚本以避免任何渲染问题非常重要。附上示例和屏幕截图供您参考。请查看以下代码片段：

单独包脚本参考：

<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

整个包脚本参考：

<script src="_content/Syncfusion.Blazor/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

CDN 脚本参考：

<script src=https://cdn.syncfusion.com/blazor/22.1.38/syncfusion-blazor.min.js type="text/javascript"></script>

示例：https://www.syncfusion.com/downloads/support/directtrac/general/ze/SyncfusionChart-834673013.zip

截图：

UG 入门：https://blazor.syncfusion.com/documentation/chart/getting-started

UG 脚本参考：https://blazor.syncfusion.com/documentation/common/adding-script-references

问候，

Gopalakrishnan Veeraraghavan