Я пытаюсь отрисовать highsoft highchart в частичном представлении.Если я отображаю диаграмму на главном экране, все работает нормально.
Частичное представление будет загружено с помощью ajax-вызова внутри моего основного представления "index.cshtml":
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<button id="showIndexChart" onclick="RenderIndexPartial()">Get Partial</button>
<div id="PartialContent">
</div>
@section scripts{
<script>
var RenderIndexPartial = function () {
$.ajax({
url: '/Line/RenderIndexPartial',
type: "Get",
cache: false,
dataType: "html",
success: function (PartialViewData) {
$('#PartialContent').html(PartialViewData);
},
error: function (xhr, status, error) {
console.log("status: " + status + " / error: " + error);
},
});
};
</script>
}
.Действие контроллера для частичного представления выглядит следующим образом: возвращает частичное представление и модель (объект Highsoft.Web.Mvc.Charts.Highcharts)
[HttpGet]
public ActionResult RenderPartial()
{
List<double> tokyoValues = new List<double> { 7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6 };
List<LineSeriesData> tokyoData = new List<LineSeriesData>();
tokyoValues.ForEach(p => tokyoData.Add(new LineSeriesData { Y = p }));
var tmpChart = new Highcharts()
{
Chart = new Chart
{
Height = 100,
Width = 100,
Type = ChartType.Line,
RenderTo = "containerPartial",
},
Title = new Title
{
Text = "Monthly Average Temperature",
},
XAxis = new List<XAxis>
{
new XAxis
{
Categories = new List<string> { "Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec" },
}
},
YAxis = new List<YAxis>
{
new YAxis
{
Title = new YAxisTitle
{
Text = "Temperature (°C)"
},
PlotLines = new List<YAxisPlotLines>
{
new YAxisPlotLines
{
Value = 0,
Width = 1,
Color = "#808080"
}
}
}
},
Series = new List<Series>
{
new LineSeries
{
Name = "Tokyo",
Data = tokyoData,
},
}
};
return PartialView("_Index", tmpChart);
}
Частичное представление "_index.cshtml" находится здесь:
@model Highsoft.Web.Mvc.Charts.Highcharts
@using Highsoft.Web.Mvc.Charts
<h1>Partial loaded</h1>
<div id="containerPartial" style="height: 400px">
@(Html.Highsoft().Highcharts(Model, "ChartB")
</div>
Если я проверю элементы dom, то внутри старших карт чего-то не хватает
Может быть, кто-то может мне помочь?Огромное спасибо.
Обновление: содержимое div и мой основной вид, где отображается диаграмма, выглядят немного иначе:
И вот ответ от моего ajax-вызова, что нужно загрузить в div "PartialContent":
<h1>Partial loaded</h1>
<div id="containerPartial" style="height: 400px">
<div id='ChartB' style='height:100;min-width:100;clear:both;margin: 0 auto;'></div><script type='text/javascript'>if (document.addEventListener) {document.addEventListener("DOMContentLoaded", function() {createChartChartB();});} else if (document.attachEvent) {document.attachEvent("onreadystatechange", function(){if (document.readyState === "complete"){document.detachEvent("onreadystatechange", arguments.callee);createChartChartB();}});}function createChartChartB() {var ChartOptions = {"xAxis":[{"categories":["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]}],"chart":{"height":100,"width":100,"type":"line","renderTo":"ChartB"},"title":{"text":"Monthly Average Temperature"},"series":[{"name":"Tokyo","type":"line","data":[{"y":7},{"y":6.9},{"y":9.5},{"y":14.5},{"y":18.2},{"y":21.5},{"y":25.2},{"y":26.5},{"y":23.3},{"y":18.3},{"y":13.9},{"y":9.6}]}],"yAxis":[{"title":{"text":"Temperature (°C)"},"plotLines":[{"width":1,"color":"#808080","value":0}]}]};new Highcharts.chart("ChartB",ChartOptions);}</script>
</div>