使用DotNet.HighCharts和WebForms不显示图表

时间:2015-01-14 11:03:27

标签: c# highcharts dotnethighcharts

我遵循本教程讨论了使用WebForms对sql server进行数据绑定。在添加数据绑定之前,我已输入原始数据以显示图表正常工作。但是,当我运行项目时,没有显示图表。我在VS2012中使用NuGet添加了DotNet.HighCharts。知道为什么没有呈现图表吗? 这是我的Default.aspx.cs

的代码
namespace HighChartsWebForms
{
    public partial class _Default : Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            Render_Chart();
        }

        protected void Render_Chart()
        {
            Object[] chartValues = new Object[8]; // declare an object for the chart rendering

            DotNet.Highcharts.Highcharts chart = new DotNet.Highcharts.Highcharts("chart")
                .InitChart(new Chart { DefaultSeriesType = ChartTypes.Line })
                .SetTitle(new Title
                {
                    Text = "Data",
                    X = -20
                })
                .SetSubtitle(new Subtitle
                {
                    Text = "Source: Static data",
                    X = -20
                })
                .SetXAxis(new XAxis
                {
                    Categories = new[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug" }
                })
                .SetSeries(new[]
                {
                    new Series
                    {
                        Name = "# Pizza",
                        Data = new Data(new object[] { 2, 3, 5, 7, 6, 6, 7, 8 }),
                    },
                });

    ltChart1.Text = chart.ToHtmlString();
        }
    }
}

这是我的Default.aspx:

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="HighChartsWebForms._Default" %>

<asp:Content runat="server" ID="FeaturedContent" ContentPlaceHolderID="FeaturedContent">
    <section class="featured">
        <div class="content-wrapper">
            <hgroup class="title">
                <h1><%: Title %>.</h1>
                <h2>Testing HighCharts with ASP.NET</h2>
            </hgroup>
        </div>
    </section>
</asp:Content>
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
    <h3>This should show a chart:</h3>
    <asp:Literal id="ltChart1" runat="server"></asp:Literal>
</asp:Content>

2 个答案:

答案 0 :(得分:2)

如果您使用 Site.Master 文件添加JavaScript文件的路径,请确保添加了这三个JavaScript文件的路径。

    <asp:ScriptManager runat="server">
        <Scripts>               
            <asp:ScriptReference Path="~/Scripts/highcharts.js" />
            <asp:ScriptReference Path="~/Scripts/jquery-1.5.1.min.js" />   
            <asp:ScriptReference Path="~/Scripts/exporting.js" />              
        </Scripts>
    </asp:ScriptManager>

查看本教程:http://dotnethighcharts.codeplex.com/ 这里针对MVC和Web表单进行了解释。

答案 1 :(得分:0)

解决方案很简单。您忘记导入highcharts.js和ajax库。

    <asp:Content runat="server" ID="FeaturedContent" ContentPlaceHolderID="FeaturedContent">
    <section class="featured">
        <div class="content-wrapper">
            <hgroup class="title">
                <h1><%: Title %>.</h1>
                <h2>Testing HighCharts with ASP.NET</h2>
            </hgroup>
        </div>
    </section>
</asp:Content>
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
    <h3>This should show a chart:</h3>

  <!-- IMPORT THE JAVASCRIPT LIBRARIES HERE -->
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
  <script type="text/javascript" src="http://code.highcharts.com/modules/exporting.js"></script>

  <asp:Literal id="ltChart1" runat="server"></asp:Literal>
</asp:Content>