Question

我正在尝试将图形呈现为.net MVC cshtml页面的局部视图。我在控制器中设置所有高图属性并返回到我想要图形的局部视图 - 我在cshtml页面中有以下内容

@((DotNet.Highcharts.Highcharts)ViewBag.highChart)

下面是我在页面上看到的脚本，但我没有看到任何html呈现显示数据..我不知道我错过了什么 - 任何帮助在这里将不胜感激。

    var graphview;
$(document).ready(function() {
    graphview = new Highcharts.Chart({
        chart: { renderTo:'graphview_container', className: 'graphview', type: 'line' }, 
        credits: { enabled: false }, 
        legend: { enabled: false }, 
        title: { text: 'Events' }, 
        xAxis: { ceiling: 24, floor: 0, tickInterval: 1, title: { text: 'Hourly' } }, 
        yAxis: { ceiling: 5, floor: 0, tickInterval: 1, title: { text: 'Time Elapsed' } }, 
        series: [{ data: [{ x: 0, y: 0 }, { x: 1, y: 0 }, { x: 2, y: 0 }, { x: 3, y: 0 }, { x: 4, y: 0 }, { x: 5, y: 0 }, { x: 6, y: 0 }, { x: 7.32, y: 3 }, { x: 7.37, y: 1 }, { x: 7.37, y: 2 }, { x: 7.37, y: 1 }, { x: 7.37, y: 1 }, { x: 7.4, y: 1 }, { x: 7.4, y: 1 }, { x: 7.4, y: 1 }, { x: 7.4, y: 1 }, { x: 7.45, y: 3 }, { x: 7.5, y: 2 }, { x: 7.53, y: 1 }, { x: 7.53, y: 3 }, { x: 7.58, y: 3 }, { x: 8.13, y: 3 }, { x: 8.15, y: 1 }, { x: 8.15, y: 3 }, { x: 8.18, y: 2 }, { x: 8.25, y: 2 }, { x: 8.26, y: 1 }, { x: 8.26, y: 2 }, { x: 8.38, y: 1 }, { x: 8.38, y: 2 }, { x: 8.43, y: 1 }, { x: 8.43, y: 3 }, { x: 8.44, y: 1 }, { x: 8.44, y: 1 }, { x: 8.47, y: 1 }, { x: 8.47, y: 1 }, { x: 8.48, y: 1 }, { x: 8.48, y: 1 }, { x: 8.5, y: 1 }, { x: 8.5, y: 1 }, { x: 8.54, y: 2 }, { x: 8.58, y: 1 }, { x: 8.58, y: 2 }, { x: 9.02, y: 1 }, { x: 9.03, y: 3 }, { x: 9.03, y: 1 }, { x: 9.03, y: 1 }, { x: 9.06, y: 2 }, { x: 9.52, y: 3 }, { x: 9.55, y: 1 }, { x: 9.55, y: 2 }, { x: 9.57, y: 1 }, { x: 9.57, y: 3 }, { x: 10.55, y: 2 }, { x: 10.04, y: 3 }, { x: 10.21, y: 1 }, { x: 10.21, y: 3 }, { x: 10.28, y: 3 }, { x: 11.12, y: 3 }, { x: 11.44, y: 1 }, { x: 11.44, y: 2 }, { x: 11.49, y: 1 }, { x: 11.49, y: 2 }, { x: 11.51, y: 1 }, { x: 11.51, y: 2 }, { x: 12, y: 0 }, { x: 13, y: 0 }, { x: 14, y: 0 }, { x: 15, y: 0 }, { x: 16, y: 0 }, { x: 17, y: 0 }, { x: 18, y: 0 }, { x: 19, y: 0 }, { x: 20, y: 0 }, { x: 21, y: 0 }, { x: 22, y: 0 }, { x: 23, y: 0 }], name: 'Time Taken to Load: ' }]
    });
});

BTW-我按照以下顺序在_layout.cshtml中有脚本渲染标记。

@Scripts.Render("~/bundles/jquery", "~/bundles/jqueryui",
            "~/bundles/bootstrap", "~/bundles/modernizr", 
            "~/bundles/highCharts")

我在这里错过了什么吗？

更新这是我的控制器代码：

public ActionResult GetChart()
{
    AllTransactionsByEvent = *get data from model* in list<obj>
    Highcharts highChart = new Highcharts("graphview");

    if (AllTransactionsByEvent.Count > 0)
    {
        Legend aLegend = new Legend { Enabled = false };
        highChart.SetLegend(aLegend);
        highChart.SetCredits(new Credits { Enabled = false });

        YAxis yAxis = new YAxis();
        yAxis.Floor = 0;
        yAxis.Title = new YAxisTitle() { Text = "Time Elapsed" };
        yAxis.TickInterval = 1;
        yAxis.Ceiling = 5;

        XAxis xAxis = new XAxis { Title = new XAxisTitle { Text = "Hourly" } };

        xAxis.Floor = 0;
        xAxis.Ceiling = 24;
        xAxis.TickInterval = 1;
        //Init list of DataPoints and DataSeries will hold an array of points
        List<Point> dataPoints = new List<Point>();
        Series dataSeries = new Series();

        dataSeries.Name = "Time Taken to Load: ";


        DateTime startdate = Convert.ToDateTime("2015-11-16 00:00:00.000");
        DateTime Enddate = Convert.ToDateTime("2015-11-16 23:59:59.000");
        for (int i = 0; i <= Enddate.Hour; i++)
        {
            List<TraceDetail> dataList = AllTransactionsByEvent.Where(x => (DateTime.ParseExact(x.ts_ky_end.Trim(), "yyyy-MM-dd-HH.mm.ss.fffff", null)).Hour.Equals(i)).ToList();
            if (dataList.Count > 0)
            {
                foreach (var item in dataList)
                {
                    string FormattedEndTime = DateTime.ParseExact(item.ts_ky_end.Trim(), "yyyy-MM-dd-HH.mm.ss.fffff", null).ToString("yyyy-MM-dd HH:mm:ss");
                    Point dataPoint = new Point();
                    //dataPoint.Color = System.Drawing.ColorTranslator.FromHtml("#d9534f");
                    //dataPoint.X = Helpers.TimeDisplayHelper.ConvertToJS(Convert.ToDateTime(FormattedEndTime));
                    dataPoint.X = Convert.ToDouble(Convert.ToDateTime(FormattedEndTime).ToString("HH.mm"));
                    dataPoint.Y = (int)Math.Ceiling(Convert.ToDecimal(item.qy_elapse));
                    System.Diagnostics.Debug.WriteLine("[" + dataPoint.X + ", " + dataPoint.Y + "]");
                    //add the data point
                    dataPoints.Add(dataPoint);
                }
            }
            else
            {
                Point dataPoint = new Point();
                //dataPoint.X = Helpers.TimeDisplayHelper.ConvertToJS(startdate.AddHours(i));
                dataPoint.X = i;
                dataPoint.Y = 0;
                //dataPoint.Color = System.Drawing.ColorTranslator.FromHtml("#5cb85c");
                System.Diagnostics.Debug.WriteLine("[" + dataPoint.X + ", " + dataPoint.Y + "]");
                dataPoints.Add(dataPoint);
            }
        }

        dataSeries.Data = new Data(dataPoints.ToArray());
        highChart.InitChart(new Chart() { Type = ChartTypes.Line, ClassName = "graphview" }).SetXAxis(xAxis).SetSeries(dataSeries).SetTitle(new Title() { Text = "Events" }).SetYAxis(yAxis);


    }

    ViewBag.highChart = highChart;

    return PartialView("~/views/shared/HighChart.cshtml");

Answer 1

您并没有错过太多。您需要返回实际的Highchart对象作为诸如return View(highChart)之类的视图参数。我用自己的数据来满足测试用例。

控制器：

public ActionResult GetChart()
    {

    SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["con"].ConnectionString);
    SqlCommand com;
    SqlDataReader dr;
    List<SalesVsTarget> SalesList = new List<SalesVsTarget>();// SalesVsTarget is my Model

        using (con)
        {
            con.Open();

            com = new SqlCommand("select * from [SalesVsTarget]", con);
            dr = com.ExecuteReader();

            while (dr.Read())
            {
                SalesVsTarget Sales = new SalesVsTarget();
                Sales.Id = Convert.ToInt32(dr["Id"]);
                Sales.Date = Convert.ToDateTime(dr["Date"]);
                Sales.Inforce = Convert.ToInt32(dr["Inforce"]);
                Sales.Target = Convert.ToInt32(dr["Target"]);
                Sales.PolicyType = dr["PolicyType"].ToString();
                SalesList.Add(Sales);

            }
        }

        var AllTransactionsByEvent = from o in SalesList select o;
        Highcharts highChart = new Highcharts("graphview");

        //if (AllTransactionsByEvent.Count > 0)
        //{
        Legend aLegend = new Legend { Enabled = false };
        highChart.SetLegend(aLegend);
        highChart.SetCredits(new Credits { Enabled = false });

        YAxis yAxis = new YAxis();
        yAxis.Floor = 0;
        yAxis.Title = new YAxisTitle() { Text = "Time Elapsed" };
        yAxis.TickInterval = 1;
        yAxis.Ceiling = 5;

        XAxis xAxis = new XAxis { Title = new XAxisTitle { Text = "Hourly" } };

        xAxis.Floor = 0;
        xAxis.Ceiling = 24;
        xAxis.TickInterval = 1;
        //Init list of DataPoints and DataSeries will hold an array of points
        List<Point> dataPoints = new List<Point>();
        Series dataSeries = new Series();

        dataSeries.Name = "Time Taken to Load: ";


        DateTime startdate = Convert.ToDateTime("2015-11-16 00:00:00.000");
        DateTime Enddate = Convert.ToDateTime("2015-11-16 23:59:59.000");
        for (int i = 0; i <= Enddate.Hour; i++)
        {
          //  List<SalesVsTarget> dataList = AllTransactionsByEvent.Where(x => (DateTime.ParseExact(x.Date.ToString(), "yyyy-MM-dd-HH.mm.ss.fffff", null)).Hour.Equals(i)).ToList();
            if (SalesList.Count > 0)
            {
                foreach (var item in SalesList)
                {
                  //  string FormattedEndTime = DateTime.ParseExact(item.Date.ToString(), "yyyy-MM-dd-HH.mm.ss.fffff", null).ToString("yyyy-MM-dd HH:mm:ss");
                    Point dataPoint = new Point();
                    //dataPoint.Color = System.Drawing.ColorTranslator.FromHtml("#d9534f");
                    //dataPoint.X = Helpers.TimeDisplayHelper.ConvertToJS(Convert.ToDateTime(FormattedEndTime));
                    dataPoint.X=item.Inforce;
                    dataPoint.Y = (int)Math.Ceiling(Convert.ToDecimal(item.Inforce));
                    System.Diagnostics.Debug.WriteLine("[" + dataPoint.X + ", " + dataPoint.Y + "]");
                    //add the data point
                    dataPoints.Add(dataPoint);
                }
            }
            else
            {
                Point dataPoint = new Point();
                //dataPoint.X = Helpers.TimeDisplayHelper.ConvertToJS(startdate.AddHours(i));
                dataPoint.X = i;
                dataPoint.Y = 0;
                //dataPoint.Color = System.Drawing.ColorTranslator.FromHtml("#5cb85c");
                System.Diagnostics.Debug.WriteLine("[" + dataPoint.X + ", " + dataPoint.Y + "]");
                dataPoints.Add(dataPoint);
            }
        }

        dataSeries.Data = new Data(dataPoints.ToArray());
        highChart.InitChart(new Chart() { Type = ChartTypes.Line, ClassName = "graphview" }).SetXAxis(xAxis).SetSeries(dataSeries).SetTitle(new Title() { Text = "Events" }).SetYAxis(yAxis);


        //}

        ViewBag.highChart = highChart;

        return View(highChart);
    }

查看：

@model DotNet.Highcharts.Highcharts

@{
    ViewBag.Title = "GetChartTest";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/timeline.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
@Scripts.Render("~/bundles/bootstrap")
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
<div class="row">
    <div>

        <div class="col-md-12 col-md-6">
            @(Model)
        </div>
    </div>
</div>

输出

HighChart无法在C＃MVC上呈现

1 个答案: