HighCharts.JS/General Javascript

我在这方面找到了一些帖子，但没有一篇能帮助我解决这个问题。我会尽力解释的

当我将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调用服务成功的时候，我需要能够让图表对容器进行渲染等

目前，这只是使用示例，我不需要使用Ajax，但实际上，在绘制图表之前，需要进行一些长时间运行的计算

如果我需要补充更多的信息，请说，我会尽我所能进一步解释

---

提前感谢

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

---

但是，如果您不想这样做，您可以始终使用helper函数将序列加载到图表中，如示例所示

我不使用ASP，但是，

OnGetChartDataSucces

看起来像是ajaxical回调函数。

result

是包含需要加载到图表中的数据的JSON响应吗？看起来怎么样？当ajax调用成功完成时，是否要使用新数据更新图表？

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');
}