成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

js圖表控件：highcharts的應(yīng)用(二)

    柱狀圖

成都創(chuàng)新互聯(lián)主要從事成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)烏魯木齊,十年網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18980820575

    前臺代碼：

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="zhuxingtu2.aspx.cs" Inherits="hhh.zhuxingtu2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            var chart;
            $(document).ready(function () {
                var colors = Highcharts.getOptions().colors,
            categories =<%=strtxt %> ,//x軸要顯示的文本

            name = '&nbsp;',

            data = [//每個柱形圖
              <%=Result() %>
            ];

                function setChart(name, categories, data, color) {

                    chart.xAxis[0].setCategories(categories);

                    chart.series[0].remove();

                    chart.addSeries({

                        name: name,

                        data: data,

                        color: color || 'white'//顏色不足，則用白色顯示柱狀圖

                    });

                }



                chart = new Highcharts.Chart({

                    chart: {

                        renderTo: 'container',

                        type: 'column'//圖表類型（柱狀圖）

                    },

                    title: {//大標(biāo)題

                        text: '測試數(shù)據(jù)'

                    },

                    subtitle: {//小標(biāo)題

                        text: '正常狀態(tài)下顯示金額，鼠標(biāo)放在每個柱形圖上顯示金額和百分比'

                    },

                    xAxis: {

                        categories: categories

                    },

                    yAxis: {//Y軸邊上的文字

                        title: {

                            text: '單位/萬元'

                        }

                    },

                    plotOptions: {

                        column: {

                            dataLabels: {

                                enabled: true,

                                color: colors[0],

                                style: {

                                    fontWeight: 'bold'

                                },

                                formatter: function () {

                                    return this.y ;//柱形圖上的數(shù)字

                                }

                            }

                        }

                    },

                    tooltip: {//鼠標(biāo)滑過事件

                        formatter: function () {

                            var point = this.point,

                        s = this.x + ':<b>' + this.y + '萬元 </b><br/>';

                            if (point.drilldown) {

                                s +="所占百分比："+changeTwoDecimal_f(((this.y)/<%=allcount %>)*100)+"%";

                            }
                            return s;

                        }

                    },

                    series: [{

                        name: name,

                        data: data,

                        color: 'white'

                    }],

                    exporting: {

                        enabled: false

                    }

                });

            });
            //截取
            changeTwoDecimal_f = function (floatvar) {
                var f_x = parseFloat(floatvar);
                if (isNaN(f_x)) {
                    alert('function:changeTwoDecimal->parameter error');
                    return false;
                }
                var f_x = Math.round(floatvar * 100) / 100;
                var s_x = f_x.toString();
                var pos_decimal = s_x.indexOf('.');
                if (pos_decimal < 0) {
                    pos_decimal = s_x.length;
                    s_x += '.';
                }
                while (s_x.length <= pos_decimal + 2) {
                    s_x += '0';
                }
                return s_x;
            }
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <script src="Scripts/highcharts.js" type="text/javascript"></script>
        <script src="Scripts/exporting.js" type="text/javascript"></script>
        <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
    </div>
    </form>
</body>
</html>

 

     后臺代碼：

     public string str = "";//數(shù)據(jù)
        public string strtxt = "[";//文本
        public string strtxt1 = "";
        public int m = 0;
        public double allcount=0;
        protected void Page_Load(object sender, EventArgs e)
        {
            LoadData();
            Result();
        }
        protected void LoadData()
        {
            XmlDocument myDoc = new XmlDocument();
            myDoc.Load(Server.MapPath("DB_51aspx.xml"));

            XmlNode xn = myDoc.SelectSingleNode("//VoteInfo[ID='2']");//讀取數(shù)據(jù)源

            XmlNodeList xnl = xn.SelectNodes("Item");
            m = xnl.Count;
            double AllCount = 0;//總數(shù)

            for (int i = 0; i < xnl.Count; i++)
            {
                AllCount += Convert.ToSingle(xnl.Item(i).SelectSingleNode("Count").InnerText);
            }


            allcount = AllCount;


            for (int i = 0; i < xnl.Count; i++)
            {
                XmlNode xn0 = xnl.Item(i);
                str+=xn0.SelectSingleNode("Count").InnerText+",";
                strtxt += "\'" + xn0.SelectSingleNode("Title").InnerText + "\'" + ",";
                strtxt1 += "\'" + xn0.SelectSingleNode("Title").InnerText + "\'" + ",";
            }

            str = str.Remove(str.Length - 1, 1);//數(shù)據(jù)
            strtxt = strtxt.Remove(strtxt.Length - 1, 1);//文本
            strtxt += "]";
            strtxt1 = strtxt1.Remove(strtxt1.Length-1,1);
        }
        public string Result()
        {
            string datastr = "";
            string[] arr = str.Split(',');
            string[] arr2 = strtxt1.Split(',');
            for (int i = 0; i < arr.Length; i++)
            {
                datastr += "{" + "y:" + Convert.ToDecimal(arr[i].ToString()) + "," + "color:colors[" + i + "]," + "drilldown: {name:" + arr2[i].ToString() + ",color:colors[" + i + "]}},";
            }
            datastr = datastr.Remove(datastr.Length - 1, 1);
            return datastr;
        }

      效果圖展示：

js圖表控件：highcharts的應(yīng)用(二)

     xml數(shù)據(jù)源：

     <?xml version="1.0" encoding="utf-8"?>
<Vote>
  <VoteInfo>
    <ID>2</ID>
    <VoteTitle></VoteTitle>
    <Item>
      <VoteID>1</VoteID>
      <Title>全站源碼</Title>
      <Count>110</Count>
    </Item>
    <Item>
      <VoteID>2</VoteID>
      <Title>新聞文章</Title>
      <Count>20</Count>
    </Item>
    <Item>
      <VoteID>3</VoteID>
      <Title>博客論壇</Title>
      <Count>123</Count>
    </Item>
    <Item>
      <VoteID>4</VoteID>
      <Title>影音視頻</Title>
      <Count>28</Count>
    </Item>
    <Item>
      <VoteID>5</VoteID>
      <Title>上傳下載</Title>
      <Count>100</Count>
    </Item>
    <Item>
      <VoteID>6</VoteID>
      <Title>功能源碼</Title>
      <Count>100</Count>
    </Item>
    <Item>
      <VoteID>7</VoteID>
      <Title>投票調(diào)查</Title>
      <Count>200</Count>
    </Item>
    <Item>
      <VoteID>8</VoteID>
      <Title>聊天計數(shù)</Title>
      <Count>140</Count>
    </Item>
    <Item>
      <VoteID>9</VoteID>
      <Title>行政辦公</Title>
      <Count>180</Count>
    </Item>
    <Item>
      <VoteID>10</VoteID>
      <Title>天龍八部</Title>
      <Count>200</Count>
    </Item>
    <Item>
      <VoteID>11</VoteID>
      <Title>神雕俠侶</Title>
      <Count>200</Count>
    </Item>
    <Item>
      <VoteID>12</VoteID>
      <Title>碧血劍</Title>
      <Count>200</Count>
    </Item>
    <Item>
      <VoteID>13</VoteID>
      <Title>王重陽</Title>
      <Count>100</Count>
    </Item>
    <Item>
      <VoteID>14</VoteID>
      <Title>張無忌至武當(dāng)山</Title>
      <Count>100</Count>
    </Item>
    <Item>
      <VoteID>15</VoteID>
      <Title>張三豐</Title>
      <Count>100</Count>
    </Item>
    <Item>
      <VoteID>16</VoteID>
      <Title>張翠山</Title>
      <Count>5</Count>
    </Item>
    <Item>
      <VoteID>17</VoteID>
      <Title>金毛獅王</Title>
      <Count>1</Count>
    </Item>
    <Item>
      <VoteID>18</VoteID>
      <Title>紫衫龍王</Title>
      <Count>2</Count>
    </Item>
    <Item>
      <VoteID>19</VoteID>
      <Title>紫衫龍王2</Title>
      <Count>6</Count>
    </Item>
    <Item>
      <VoteID>20</VoteID>
      <Title>紫衫龍王3</Title>
      <Count>1</Count>
    </Item>
    <Item>
      <VoteID>20</VoteID>
      <Title>紫衫龍王4</Title>
      <Count>1</Count>
    </Item>
    <Item>
      <VoteID>20</VoteID>
      <Title>紫衫龍王5</Title>
      <Count>1</Count>
    </Item>
    <Item>
      <VoteID>20</VoteID>
      <Title>紫衫龍王6</Title>
      <Count>1</Count>
    </Item>
  </VoteInfo>
</Vote>

網(wǎng)站名稱：js圖表控件：highcharts的應(yīng)用(二)
網(wǎng)頁URL：http://jinyejixie.com/article12/iieddc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、用戶體驗、網(wǎng)站制作、企業(yè)建站、定制開發(fā)、App開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都定制網(wǎng)站網(wǎng)頁設(shè)計
长沙市| 滁州市| 沅江市| 顺昌县| 石嘴山市| 石城县| 大荔县| 沧州市| 宜都市| 肇庆市| 江油市| 忻州市| 邮箱| 蓝田县| 西畴县| 淄博市| 扎赉特旗| 湟中县| 盐源县| 垫江县| 怀远县| 江源县| 柞水县| 丹阳市| 吴忠市| 巢湖市| 青神县| 双辽市| 龙川县| 镇安县| 青冈县| 安乡县| 德昌县| 甘肃省| 乐东| 达拉特旗| 石棉县| 德庆县| 长乐市| 进贤县| 涪陵区|