具有sql server数据的Highcharts

Question

我刚刚开始使用高图,我需要从它上面的sql server数据库中呈现值.

请问,使用asp.net作为服务器端语言,我这样做的最佳方法是什么.

在此先感谢您的回复,我正在取得一些进展.但是,从数据库动态获取xAxis类别证明是困难的.这是我的代码如下

DataSet dsSeries = new DataSet();
       public string hidValues1;
       public string hidXCategories1;
        protected void Page_Load(object sender, EventArgs e)
        {

            if (!IsPostBack)

            dsSeries=BindData();

            if (dsSeries == null) return;

            foreach (DataRow dr in dsSeries.Tables[0].Rows)
            {
                hidXCategories1=hidXCategories1+ dr["symbol"].ToString()+",";

            }

            foreach (DataRow dr1 in dsSeries.Tables[0].Rows)
            {
                hidValues1=hidValues1+dr1["value"].ToString()+",";

            }


        }

        public DataSet BindData()
        {
            string connString = ConfigurationManager.ConnectionStrings["Chartdata"].ToString();
            SqlConnection con = new SqlConnection(connString);
            SqlCommand cmd = new SqlCommand();
            cmd.Connection = con;
            cmd.CommandText = "SELECT symbol,value FROM Ticker";
            SqlDataAdapter da = new SqlDataAdapter(cmd);
            try
            {
                DataSet ds = new DataSet();
                da.Fill(ds);
                return ds;

            }
            catch (Exception ex)
            {
                throw ex;
            }
        }
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
        <script type="text/javascript" src="Scripts/highcharts.js"></script>
        <script type="text/javascript" src="Scripts/exporting.js"></script>
        <script type="text/javascript">

            var firstSeries = '<%=hidValues1 %>';
            var xAxis = '<%=hidXCategories1 %>';
            var banksname;
            var seriesOne = new Array();
            seriesOne = firstSeries.split(',');
            for (var i = 0; i < seriesOne.length; i++) {

                seriesOne[i] = parseInt(seriesOne[i]);
            }
            var xAxisSeries = new Array();
            xAxisSeries = xAxis.split(',');
            for (var i = 0; i < xAxisSeries.length; i++) {

                banksname =banksname+ seriesTwo[i];

            }


            var _MyArray = seriesOne;
            var _MyArray2 = banksname;
            $(document).ready(function () {
                chart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'container',
                        defaultSeriesType: 'line'
                    },
                    title: {
                        text: 'Fruit Consumption'
                    },
                    xAxis: {
                        categories:[_MyArray2]
                    },
                    yAxis: {
                        title: {
                            text: 'Fruit eaten'
                        }
                    },
                    series: [{
                        name:'Share Price',
                        data:_MyArray
                    }]


                });
                $('tspan').last().remove();
            });  
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>

yAxis数据在图表上正确填充和渲染,但xAxis类别仍显示在数字中(这是数据库表中类别的数字列表).

Answer 1

DotNet.Highcharts使您可以在服务器站点上轻松构建Highcharts而无需任何JavaScript代码.以下是如何在ASP.NET应用程序中创建图表的代码:

Highcharts chart = new Highcharts("chart")
            .SetTitle(new Title { Text = "Fruit Consumption" })
            .SetXAxis(new XAxis { Categories = _MyArray2 })
            .SetYAxis(new YAxis { Title = new YAxisTitle { Text = "Fruit eaten" } })
            .SetSeries(new Series { Name = "Share Price", Data = new Data(_MyArray) });

有关更多样本,请访问:http://dotnethighcharts.codeplex.com/releases/view/80650