Question

我发现了一些帖子，但没有一个能帮我解决问题。我会尽力解释一下。

我的HighCharts示例代码在我将它放在ASP.NET用户控件中并且只是浏览到包含我的用户控件的页面时工作正常，因为它只是与highcharts包一起提供的相同示例。因此，以下代码位于asp.net Web用户控件中。

      <!-- 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，但实际上会有一些长时间运行的计算需要在呈现图表之前进行。

如果我需要向此添加更多信息，请说明并尽力进一步解释。

提前致谢

Answer 1

您最简单的选择是使用来自codeplex的Highcharts .Net库，它充当Highcharts js库的包装器，允许您仅使用C＃创建图表。

但是，如果你不想这样做，你可以随时使用辅助函数将系列加载到图表中，如示例here

所示

HighCharts.JS /一般Javascript

1 个答案: