在ASP.NET Web表单上使用多个hicharts，但只有一个显示在页面的上半部分，向下推送页眉

Question

我正在尝试使用http://dotnet.highcharts.com/dev/Highcharts/Demo/Docs?section=WFFirstChart3上提供的示例代码在我的ASP.NET Web表单上使用HiChart

我面临的问题是图表显示但它显示在页面的上半部分并且不会被限制在我试图将其放入的部分中。在主文件中生成的页面标题向下移动。

我的aspx页面看起来像：

<script type="text/javascript" 
src="http://code.highcharts.com/highcharts.js"></script> 
<script type="text/javascript" 
src="https://code.highcharts.com/modules/exporting.js"></script>

<asp:Panel ID="pnlCharts" runat="server"> 
    <div class="form-group"> 
        <div class="rows"> 
            <div class="col-sm-1"></div> 
            <div class=col-sm-5> 
                <hichart:HighChartIncidents ID="hichartIncidents" runat="server"/> </div> 
            <div class="col-sm-1"></div> 
            <div class="col-sm-5">
                <hichart:HighChartIncidents ID="HighChartIncidents1" runat="server"/>
            </div> 
            <div class="col-sm-1"></div> 
        </div> 
    </div> 
</asp:Panel> 

Answer 1

最初的问题是我正在使用Response.Write来编写图表html，它被写在页面标题上方，将其向下移动。

其次，我使用的是硬编码图表名称，这导致了对同一个hichart控件并排显示多个图表的问题。为了解决我添加了一个属性ChartName并使用它来避免相同控件的多个实例的相同图表名称。

IE浏览器未显示图表的问题仍在调查中。

Answer 2

Highcharts.net API不适用于Web表单，因为它在其示例中仅使用Response.Write。使用文字服务器控件可以解决问题。 https://archive.codeplex.com/?p=dotnethighcharts

//using Highsoft.Web.Mvc.Charts; //v7.0.1
Highcharts chart = new Highcharts
{
    ID = "chartid",
    Chart = new Chart
    {
        Type = ChartType.Scatter,
        ZoomType = ChartZoomType.Xy
    },
    Title = new Title
    {
        Text = "example"
    },
    Subtitle = new Subtitle
    {
        Text = "example"
    },
    XAxis = new List<XAxis>
    {
        new XAxis
        {
            Type = XAxisType.Datetime,
            Title = new XAxisTitle
            {
                Text = "Date"
            }
        }
    },
    YAxis = new List<YAxis>
    {
        new YAxis
        {
            Type = YAxisType.Linear,
            Title = new YAxisTitle
            {
                Text = "Value"
            }
        }
    },
    Legend = new Legend
    {
        Align = LegendAlign.Right,
        Enabled = true,
        Layout = LegendLayout.Vertical,
        VerticalAlign = LegendVerticalAlign.Top
    },
    Series = series, //List<Series> adding a SplineSeries for each legend item
};

HighsoftNamespace Highsoft_chart = new HighsoftNamespace();
literal.Text = Highsoft_chart.GetHighcharts(chart, "chartid").ToHtmlString();