js图表控件：highcharts的应用(二)

柱状图

前台代码：

<%@ 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 = ' ',

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: {//大标题

text: '测试数据'

subtitle: {//小标题

text: '正常状态下显示金额，鼠标放在每个柱形图上显示金额和百分比'

xAxis: {

categories: categories

yAxis: {//Y轴边上的文字

title: {

text: '单位/万元'

}

plotOptions: {

column: {

dataLabels: {

enabled: true,

color: colors[0],

style: {

fontWeight: 'bold'

formatter: function () {

return this.y ;//柱形图上的数字

}

tooltip: {//鼠标滑过事件

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 = "";//数据
        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']");//读取数据源

XmlNodeList xnl = xn.SelectNodes("Item");
m = xnl.Count;
double AllCount = 0;//总数

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);//数据
            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;
        }

效果图展示：

xml数据源：

<?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>投票调查</Title>
      <Count>200</Count>
    </Item>
    <Item>
      <VoteID>8</VoteID>
      <Title>聊天计数</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>张无忌至武当山</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>

转载于:https://blog.51cto.com/cangqiong/874310

js图表控件：highcharts的应用(二)相关推荐

Atitit.js图表控件总结
Atitit.js图表控件总结 1. 为什么要使用图表1 2. 图表分类1 3. 数据可视化的优点1 4. 流行的js图表类库1 5. 参考2 1. 为什么要使用图表因为要可视化 2. 图表分类条 ...
（转）基于MVC4+EasyUI的Web开发框架经验总结（4）--使用图表控件Highcharts
http://www.cnblogs.com/wuhuacong/p/3736564.html 在我们做各种应用的时候,我们可能都会使用到图表统计,以前接触过一些不同的图表控件,在无意中发现了图表控件 ...
前端 js 非控件使用标签打印机打印二维码和文本_青岛Web前端（HTML5）面试题分享...
HTML5是前端开发人员必须掌握的技能之一,那么在面试时,面试官常问到的HTML5的问题有哪些呢? 青岛HTML5 1.Doctype作用?严格模式与混杂模式如何区分?它们有何意义? 答:告知浏览器的 ...
网页图表控件Highcharts如何详细设置参数
在下载了Highcharts范例之后,按照如下所示第一步第二步操作.在第二步中,默认并没有提供很多参数设置,比如如何去掉右下角的水印,如何自定义图标的高度宽度,背景颜色等等. 在我的另一篇文章中(Hi ...
JQuery Highcharts图表控件使用说明
JQuery Highcharts图表控件使用说明 Highcharts 官网:http://www.highcharts.com Highcharts 官网示例:http://www.highcha ...
WPF 曲线图表控件（自制）（二）
原文:WPF 曲线图表控件(自制)(二) 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/koloumi/article/details/775218 ...
图表控件AnyChart教程：如何制作 JavaScript 极坐标图（二）
目录 JS 极坐标图预览 1.用HTML创建一个基本的网页 2. 引用所需的 JavaScript 文件 3. 添加数据 4.编写一些JS代码来绘制极坐标图初始极地图结果自定义 JS 极坐标图 A ...
ASP.NET Core MVC TagHelper实践HighchartsNET快速图表控件
ASP.NET Core MVC TagHelper最佳实践HighchartsNET快速图表控件支持ASP.NET Core. 曾经在WebForms上写过 HighchartsNET快速图表控件- ...
属性导出FusionCharts图表控件中文版使用手册
PS:今天上午,非常郁闷,有很多简单基础的问题搞得我有些迷茫,哎,代码几天不写就忘.目前又不当COO,还是得用心记代码哦! FusionCharts图表控件中文版应用手册目录媒介.先谈谈我对fus ...

js图表控件：highcharts的应用(二)

js图表控件：highcharts的应用(二)相关推荐

最新文章

热门文章