当前位置: 代码迷 >> C# >> 利用Highcharts展示数据库的数据+饼状图
  详细解决方案

利用Highcharts展示数据库的数据+饼状图

热度:227   发布时间:2016-05-05 05:09:26.0
利用Highcharts显示数据库的数据+饼状图
<script type="text/javascript">
    $(function () {
        var rowData = JSON2.parse('<%=CurrentID %>');
        var seriesData = "";

        $(rowData).each(function (i, data) {
            var item = { name: data.kind_name, data: [data.tongji_rate] };
            if (seriesData == "") {
                seriesData = JSON2.stringify(item);
            }
            else {
                seriesData = seriesData + "," + JSON2.stringify(item);
            }


        });

        var seriesDatas = JSON2.parse("[" + seriesData + "]");
      

        var tab = $("#tabcontainer").ligerTab();
        $('#container').highcharts({
            chart: { type: 'pie' },
            title: { text: '图书类别比例图' },
          

      


            //series: seriesDatas
            series: [{
   ???????????????????
     《《《这里应该填什么?要获取到数据库的内容》》》                  

            }]


        });

</script>
</head>
    <body>
        <script type="text/javascript" src="/Highcharts/js/highcharts.js"></script>
        <script type="text/javascript" src="/Highcharts/js/modules/exporting.js"></script>

        <div id="tabcontainer" style="margin:0px;">
            <div title="饼状图" tabid="tab1">
                <div id="container" style="min-width: 400px; height: 400px;width:100%; margin: 0 auto"></div>
            </div>
  

    </body>
</html>

表格为:
分类编码:kind_code
分类名name: "kind_name
 数量":ebook_amount
比例(%):tongji_rate




------解决思路----------------------

  series: [{ type: 'spline', name: '气温', marker: {
                    symbol: 'url(images/02.png)'
                },data:<%= returnValue %> , yAxis: 0, color: '#FF9C23' }, { type: 'column', name: '降水', data:<%= returnValue1 %> , yAxis: 1, color: '#FFFFFF'}]
            });

后台的代码:

 public string returnValue1 ="";
        public string xAxisCategories="";
        public string containerHeight = "400px";
        public string returnValue = "";
        protected void Page_Load(object sender, EventArgs e)
        {

            if (!IsPostBack)
            {

                DataTable dt = GetData();
                if (dt.Rows.Count > 0)
                {
                  
                    string dataT = "[";
                    string dataY = "[";
                    string dataX = "[";
                    foreach (DataRow dr in dt.Rows)
                    {                      
                        dataT += "'" + dr["Time"].ToString() + "',";
                        dataX += dr["City"].ToString() + ",";
                        dataY += dr["Count"].ToString() + ",";
                    }
                    xAxisCategories=dataT.Substring(0, dataT.Length - 1) + "]";
                    returnValue = dataX.Substring(0, dataX.Length - 1) + "]";
                    returnValue1 = dataY.Substring(0, dataY.Length - 1) + "]";
                }
            }

        }
        //这里可以换成直接从数据库取数据,写到datatable中就可,
      //测试数据,
        private DataTable GetData()
        {
            DataTable tableInfo = new DataTable();

            DataColumn dctime = new DataColumn("Time", Type.GetType("System.String"));
            DataColumn dcCity = new DataColumn("City", Type.GetType("System.String"));
            DataColumn dcCount = new DataColumn("Count", Type.GetType("System.Int32"));
            tableInfo.Columns.Add(dctime);
            tableInfo.Columns.Add(dcCity);
            tableInfo.Columns.Add(dcCount);
            DataRow dr = tableInfo.NewRow();
            dr["Time"] = "1:00";
            dr["City"] = "10";
            dr["Count"] = "15";
            tableInfo.Rows.Add(dr);
            DataRow dr1 = tableInfo.NewRow();
            dr1["Time"] = "2:00";
            dr1["City"] = "12";
            dr1["Count"] = "19";
            tableInfo.Rows.Add(dr1);
            DataRow dr2 = tableInfo.NewRow();
            dr2["Time"] = "3:00";
            dr2["City"] = "13";
            dr2["Count"] = "25";
            tableInfo.Rows.Add(dr2);
            DataRow dr3 = tableInfo.NewRow();
            dr3["Time"] = "4:00";
            dr3["City"] = "14";
            dr3["Count"] = "10";
            tableInfo.Rows.Add(dr3);

            DataRow dr4 = tableInfo.NewRow();
            dr4["Time"] = "5:00";
            dr4["City"] = "15";
            dr4["Count"] = "11";
            tableInfo.Rows.Add(dr4);

            DataRow dr5 = tableInfo.NewRow();
            dr5["Time"] = "6:00";
            dr5["City"] = "16";
            dr5["Count"] = "17";
            tableInfo.Rows.Add(dr5);

            DataRow dr6 = tableInfo.NewRow();
            dr6["Time"] = "7:00";
            dr6["City"] = "17";
            dr6["Count"] = "20";
            tableInfo.Rows.Add(dr6);

            DataRow dr7 = tableInfo.NewRow();
            dr7["Time"] = "8:00";
            dr7["City"] = "12";
            dr7["Count"] = "13";
            tableInfo.Rows.Add(dr7);
            return tableInfo;
        }



------解决思路----------------------
利用数组的方式解决