为什么我的剑道图表没有显示任何数据,但系列正在legen中呈现

时间:2016-02-05 00:37:20

标签: kendo-ui kendo-asp.net-mvc kendo-dataviz kendo-chart

我正在使用MVC包装器使用Kendo Chart,我需要根据模型中的数据在运行时添加系列

我已经确认我的模型在图表即将呈现时确实包含有效数据

视图的模型是一个图表小部件对象,其中包含一个系列列表

这只是一个图表系列列表

预算图表小组件

namespace STC.Widgets.Budgeting
{
    using System;
    using System.Collections.Generic;
    using Budget;
    using Extensions;
    using Helpers;

    public class BudgetChartWidget 
    {
        public BudgetChartWidget()
        {
            SeriesList = new List<IBudgetChartSeries>();
        }

        public List<IBudgetChartSeries> SeriesList { get; set; }
        public string ChartTitle { get; set; }
    }
}

**Budget Chart Series**

namespace STC.Widgets.Data.Budgeting
{
    using System.Collections.Generic;

    public class BudgetChartSeries : IBudgetChartSeries
    {
        public BudgetChartSeries(string seriesName)
        {
            Values = new List<IChartValue>();
            SeriesName = seriesName;
        }

        public string SeriesName { get; set; }

        public List<IChartValue> Values { get; set; }
    }
}

每个图表系列都包含值

IChartValue

namespace STC.Widgets.Data.Budgeting
{
    using System;

    public interface IChartValue
    {
        string DisplayValue { get; set; }
        DateTime Period { get; set;  }
        double? Value { get; set; }
    }
}

图表的部分视图

@using STC.Widgets.Data.Budgeting
@model STC.Widgets.Budgeting.BudgetChartWidget

<div>
    @(Html.Kendo().Chart(Model.SeriesList)
          .Theme((string) ViewBag.ThemeName)
          .Name("BudgetViewer" + 1)          
          .Series(series =>
          {
              foreach (var item in Model.SeriesList)
              {
                  series.Column(item.Values).Field("Value").CategoryField("DisplayValue").Name(item.SeriesName);                                    
              }
          })
          .Legend(legend => legend.Position(ChartLegendPosition.Bottom).Visible(true)) 
          .ValueAxis(axis => axis.Numeric()
              .MajorGridLines(lines => lines.Visible(true))
              .NarrowRange(true)
              .Labels(labels => labels.Format("{0:N0}"))
              .Line(line => line.Visible(true))
              .Crosshair(crosshair => crosshair.Visible(true)
                  .Tooltip(t => t.Visible(true)))
          )
          .CategoryAxis(axis => axis
              .Labels(labels => labels.Rotation(-90))
              .MajorGridLines(lines => lines.Visible(false))
              .Crosshair(crosshair => crosshair.Visible(true)
                  .Tooltip(t => t.Visible(true)))
          )
          .Tooltip(tooltip => tooltip.Visible(true).Format("{0:N0}").Shared(true)))
</div>

当我运行此系列时,系列显示在底部图例中,但图中没有数据显示

我已经检查过并且没有Javascript错误

当我使用Internet Explorer查看图表来源时,我可以看到数据存在

我无法看到我创建每个系列的方式有任何问题,我甚至尝试过不同的方式传递参数。

唯一与我的情况相关的是我正在使用的那个

有人能看到我错过了一些非常明显的东西吗?

1 个答案:

答案 0 :(得分:0)

我刚才遇到了类似的问题,在我的情况下,图表最初没有显示,但是当我点击图例时,图表显示为预期。检查后,似乎图表最初没有正确调整大小。

<div class="chart-wrapper">
    @(Html.Kendo().Chart(...)
    .....
</div>

$(document).ready(function () {kendo.resize($(".chart-wrapper"));});似乎解决了这个问题。