【发布时间】：2016-03-15 06:28:20
【问题描述】：
我正在尝试将图形呈现为 .net MVC cshtml 页面的部分视图。我在控制器中设置所有 highchart 属性并返回到我想要图形的部分视图 - 我在 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: ' }]
});
});
顺便说一句-我在 _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");
【问题讨论】：
-
在您设置属性值的控制器中分享您的代码
-
请运行console并检查是否打印任何错误
-
控制台中没有记录错误。
标签： c# asp.net-mvc-4 model-view-controller razor highcharts