Я нашел несколько постов по этому вопросу, но ни один из них не помог мне разрешить ситуацию. Я постараюсь объяснить, как могу.
Мой пример кода HighCharts работает нормально, когда я помещаю его в пользовательский элемент управления ASP.NET и просто перехожу на страницу, содержащую мой пользовательский элемент управления, поскольку это просто тот же пример, который поставляется с пакетом highcharts. Поэтому следующий код находится в пользовательском элементе управления asp.net.
<!-- 1. Add these JavaScript inclusions in the head of your page -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="/js/highcharts.js"></script>
<!-- 1a) Optional: add a theme file -->
<!--
<script type="text/javascript" src="/js/themes/gray.js"></script>
-->
<!-- 1b) Optional: the exporting module -->
<script type="text/javascript" src="/js/modules/exporting.js"></script>
<!-- 2. Add the JavaScript to initialize the chart on document ready -->
<script type="text/javascript">
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Under / Over 2.5 Goals'
},
tooltip: {
formatter: function () {
return '<b>' + this.point.name + '</b>: ' + this.percentage + ' %';
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function () {
return '<b>' + this.point.name + '</b>: ' + this.percentage + ' %';
}
}
}
},
series: [{
type: 'pie',
name: 'Under / Over 2.5 Goals',
data: [
['Under', 33.0],
['Over', 67.0]
]
}]
});
});
</script>
<!-- 3. Add the container -->
<div id="container" style="width: 800px; height: 400px; margin: 0 auto">
</div>
Когда, однако, я динамически загружаю этот же пользовательский элемент управления на свою страницу с помощью AJAX, диаграмма не отображается, и я получаю пустой белый цвет согласно встроенному стилю. Я предполагаю, что это потому, что код JS выполняется, когда документ готов, и это не будет работать, когда я загружаю элемент управления динамически.
Следующий код находится во внешнем файле .js
Service.GetChartData(OnGetChartDataSuccess, OnGetChartDataFailure);
function OnGetChartDataSuccess(result) {
$get('ChartDataContent').style.display = 'none';
Sys.UI.DomElement.removeCssClass($get('ChartDataContent'), 'loading');
$get('ChartDataContent').innerHTML = result;
$('#ChartDataContent').fadeIn(500);
}
function OnGetChartDataFailure(result) {
alert('Error loading control data');
}
Теперь, в момент, когда Ajax-вызов службы завершился успешно, я должен иметь возможность заставить диаграмму выполнять ее рендеринг и т. Д. В контейнер.
В нынешнем виде это просто пример, и мне не нужно использовать Ajax, но на практике будут некоторые длительные вычисления, которые должны быть выполнены до визуализации диаграммы.
Если мне нужно добавить больше информации, пожалуйста, скажите, и я сделаю все возможное, чтобы объяснить дальше.
Заранее спасибо