使用C＃Web窗体中的计时器刷新Highchart

Question

我正在尝试使用Highcart在自己的网站上创建图表，并且希望使用计时器自动刷新图表。但是为什么计时器到达滴答事件，图表为空白？

这是我的代码：

page.aspx

<asp:UpdatePanel ID="UpdatePanel2" runat="server">
                <ContentTemplate>
                    <div id="chart1" runat="server"></div>
                </ContentTemplate>
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="tmr1" EventName="Tick" />
                </Triggers>
            </asp:UpdatePanel>
<asp:Timer runat="server" ID="tmr1" Interval="5000" OnTick="tmr1_Tick"></asp:Timer>

后面的代码：

protected void Page_Load(object sender, EventArgs e)
        {
            tmr1.Enabled = false;
            tmr1.Enabled = true;
            createchart();
        }

public void createchart()
        {
            var bgColor = new DotNet.Highcharts.Helpers.BackColorOrGradient(System.Drawing.Color.Transparent);
            DotNet.Highcharts.Highcharts chart = new DotNet.Highcharts.Highcharts("chart2").InitChart(new DotNet.Highcharts.Options.Chart
            {
                DefaultSeriesType = DotNet.Highcharts.Enums.ChartTypes.Spline,
                ZoomType = DotNet.Highcharts.Enums.ZoomTypes.X,
                BackgroundColor = bgColor
            }).
            SetXAxis(new XAxis
            {
                Categories = new string[] {"07:00 ", "07:30 AM"},
                TickInterval = 6,
                Type = DotNet.Highcharts.Enums.AxisTypes.Datetime,
                Title = new XAxisTitle
                {
                    Text = "",
                },
                Id = "0",
            }).

            SetSeries(new[]
            {
                  new DotNet.Highcharts.Options.Series { Index=2,  PlotOptionsLine=new PlotOptionsLine{LineWidth=6, Marker=new PlotOptionsLineMarker{ Enabled=false } },  Name = "Output", Data = new Data(new object[]{ 1,3}),Color=System.Drawing.Color.Blue, Type=DotNet.Highcharts.Enums.ChartTypes.Spline,Id="0",YAxis="0" },
            }).SetTitle(new DotNet.Highcharts.Options.Title
            {
                Text = ""
            }).SetSubtitle(new Subtitle
            {
                Text = ""
            })
            .SetYAxis(new YAxis
            {
                Min = 0,
                Max = 12500,
                TickInterval = 2000,
                Title = new YAxisTitle { Text = "Pcs" },
                Id = "0",
            }
            )
            .SetTooltip(new Tooltip()
            {
                Shared = true,
                ValueSuffix = " Pcs",
            })
            .SetLegend(new DotNet.Highcharts.Options.Legend
            {
                Enabled = true
            }).SetPlotOptions(new PlotOptions
            {
                Series = new PlotOptionsSeries
                {
                    ConnectNulls = true
                }
            })
            ;

            chart1.InnerHtml = chart.ToHtmlString();
        }


protected void tmr1_Tick(object sender, EventArgs e)
        {

            createchart();
        }

我的代码怎么了？过去曾经遇到过同样问题的人请指导我。非常感谢

Answer 1

强烈建议以javascript / jquery的方式进行所有用户界面操作，我认为这是前端Web开发的本机方式。通过使用javascript AJAX函数并使用C＃作为背后的代码在服务器之前生成数据，可以轻松完成此任务。

首先，您可以创建用于生成图表的页面，例如：“ GetChart.aspx”：

public partial class GetChart : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        // Create you chart object here

        Response.Clear();
        Response.Write(chart.ToHtmlString());
        Response.End();
    }
}

在您的原始页面上，将javascript插入标题：

<script type="text/javascript">
    function loadChart() {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("chart1").innerHTML = this.responseText;
            }
        };
        xhttp.open("GET", "GetChart.aspx", true);
        xhttp.send();
    }
    function startLoopChart() {
        setInterval(loadChart, 5000);
    }
</script>

然后您可以通过执行“ startLoopChart（）”来触发图表加载，例如：

<a href="#" onclick="startLoopChart();">Start</a>
<div id="chart1"></div>