Блог

Я нашел несколько сообщений об этом, но ни одно из них не помогло мне решить ситуацию. Я постараюсь объяснить как можно лучше.

Мой пример кода 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 = resu<
    $('#ChartDataContent').fadeIn(500);
}

function OnGetChartDataFailure(result) {
alert('Error loading control data');
}
  

Теперь, в тот момент, когда Ajax-вызов службы завершился успешно, мне нужно иметь возможность заставить диаграмму выполнять ее рендеринг и т.д. В контейнере.

В нынешнем виде это просто использование примера, и мне нет необходимости использовать Ajax, но на практике будут некоторые длительные вычисления, которые необходимо выполнить перед отображением диаграммы.

Если мне нужно добавить больше информации к этому, пожалуйста, скажите, и я сделаю все возможное, чтобы объяснить дальше.

Заранее спасибо

Самый простой вариант, который у вас есть, — это использовать библиотеку Highcharts .Net от codeplex, которая действует как оболочка вокруг библиотеки Highcharts js, позволяя вам создавать диаграммы, используя только C #.

Однако, если вы так не хотите идти этим путем, вы всегда можете использовать вспомогательную функцию для загрузки ряда в диаграмму, как показано в здесь примере