highcharts+Asp.net简单示例

highcharts+Asp.net简单示例,asp.net生成DataTable后用linq处理成highcharts需要的数据格式后使用服务器端标签<%#%>绑定数据。DataTable手动添加的数据,实际应用以数据库为准。需要读取数据库。

转json字符串要用到Newtonsoft.Json.dll,可以去这里下载:Newtonsoft.Json.Net 4.0下载,效果如下

highcharts+Asp.net简单示例

示例代码如下

<%@ Page Language="C#" %>
<%@ Import NameSpace="System.Linq" %>
<%@ Import NameSpace="System.Data" %>
<!DOCTYPE html>
<script runat="server">
    protected string json;
    protected void Page_Load(object sender, EventArgs e)
    {
        //测试数据,题主需要改为读取数据库
        var dt = new DataTable();
        dt.Columns.Add("Name");
        dt.Columns.Add("Value",typeof(float));
        dt.Rows.Add("B", "3"); dt.Rows.Add("B", "5"); dt.Rows.Add("B", "6"); dt.Rows.Add("B", "3"); dt.Rows.Add("B", "11"); dt.Rows.Add("B", "13");
        dt.Rows.Add("B", "5"); dt.Rows.Add("B", "17"); dt.Rows.Add("B", "0"); dt.Rows.Add("B", "8"); dt.Rows.Add("B", "9"); dt.Rows.Add("B", "6");
        dt.Rows.Add("C", "3"); dt.Rows.Add("C", "0.6"); dt.Rows.Add("C", "3.5"); dt.Rows.Add("C", "8.4"); dt.Rows.Add("C", "13.5"); dt.Rows.Add("C", "17");
        dt.Rows.Add("C", "18.6"); dt.Rows.Add("C", "17.9"); dt.Rows.Add("C", "14.3"); dt.Rows.Add("C", "9"); dt.Rows.Add("C", "3.9"); dt.Rows.Add("C", "1");
        //测试数据
        var data = dt.Rows.Cast<DataRow>().Select(i => new { Name = i.Field<string>("Name"), Value = i.Field<float>("Value") })
            //Linq分组
            .GroupBy(i => i.Name)
            //组合成HightChart需要的内容
            .Select(i => new
            {
                name = i.Key,
                data = i.Select(x=>x.Value)
            });
        json = Newtonsoft.Json.JsonConvert.SerializeObject(data);//转为json字符串,Newtonsoft.Json.dll可以去这下载 https://www.w3dev.cn/download/20130218/Newtonsoft.Json.Net20.dll-download.aspx
        this.DataBind();//执行数据绑定,这样aspx页面的服务器端标签<%#xxxx%>才能得到数据
    }
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <script>
    </script>
    <div id="qst-daychart"></div>
    <script src="https://www.w3dev.cn/theme/js/jquery1.4.2.js" ></script>
    <script src="https://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
    <script src="https://code.highcharts.com.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
    <script>
        data = {
            chart: {
                backgroundColor: '#1e2131',
                plotBorderColor: '#1c2a38',
                plotBorderWidth: 1
            },
            title: {
                text: false,
            },
            credits: {
                enabled: false // 禁用版权信息
            },
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                tickColor: '#1c2a38',
                gridLineColor: '#1c2a38',
                lineColor: '#1c2a38',
            },
            yAxis: {
                title: false,
                gridLineColor: '#1c2a38',
                tickColor: '#1c2a38'
            },
            tooltip: {
            },
            legend: {
                layout: 'horizontal',
                align: 'center',
                verticalAlign: 'bottom',
                itemStyle: { cursor: 'pointer', color: '#FFF' },
                itemHiddenStyle: { color: '#CCC' },
            },
    series:<%#json%>//用服务器端标签绑定数据
        }
        Highcharts.chart('qst-daychart', data);
    </script>
</body>
</html>

 

加支付宝好友偷能量挖...


原创文章,转载请注明出处:highcharts+Asp.net简单示例

评论(0)Web开发网
阅读(32)喜欢(0)Asp.Net/C#/WCF