google图表小例

最新推荐文章于 2023-07-26 11:08:31 发布
ArvinStudy
最新推荐文章于 2023-07-26 11:08:31 发布
阅读量675
点赞数
分类专栏：图形操作 asp.net 开源工具 █小小代码文章标签： google div colors visualization function stylesheet
本文链接：https://blog.csdn.net/ArvinStudy/article/details/7781335
版权
█小小代码同时被 3 个专栏收录
108 篇文章 0 订阅
订阅专栏
asp.net
89 篇文章 0 订阅
订阅专栏
开源工具
20 篇文章 0 订阅
订阅专栏
<!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><title>google图表小例</title>
<link rel="Stylesheet" type="text/css" href="css/Report.css" />
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
	google.load('visualization', '1', { packages: ['corechart'] });
</script>
<script type="text/javascript">
         function drawChart(){
         drawColumn('ZChart',['负面','中立','正面'],'一周信息量比较',['#FF0000' ,'#ADADAD' , '#2828FF'],['第一列','第二列','第三列','第四列','第五列 '],[[100,160,3,9,20],[675,593,14,301,529],[109,102,21,30,104]],500);
                drawColumn('divPositive',['正面'],'一周正面信息量比较',['#2828FF'],['第一列','第二列','第三列','第四列','第五列'], [[109,102,21,30,104]],330);
                drawColumn('divNegative',['负面'],'一周负面信息量比较',['#FF0000'],['第一列','第二列','第三列','第四列','第五列'], [[100,160,3,9,20]],330);

                
                
                drawColumn1('divNegService',['博客','论坛','微博','问答','新闻','视频'],'负面媒体类型构成', ['#930000','#AE8F00','#548C00','#4DFFFF','#0000E3','#28004D'],['第一列','第二列','第三列','第四列','第五列'],[[0,1,0,0,0],[9,7,0,0,20], [83,29,0,100,75],[4,3,33,0,5],[4,58,66,0,0],[0,0,0,0,0]],550);
                drawColumn1('divPostService',['博客','论坛','微博','问答','新闻','视频'],'正面媒体类型构成', ['#930000','#AE8F00','#548C00','#4DFFFF','#0000E3','#28004D'],['第一列','第二列','第三列','第四列','第五列'],[[0,0,0,6,0],[2,2,4,3,1], [54,79,90,50,85],[0,0,0,3,0],[42,16,4,36,11],[0,0,0,0,0]],550);
                
                drawPie('divNegTopic2',['驾驶安全性','行李','登转机服务','空乘服务','品牌','票务服务','机舱环境','餐饮'],[5,26,10,2,14,2,2,1],' 负面话题构成',['#4f81bd','#9bbb59','#8064a2','#c0504d','#f2dddc','#c5d9f1','#e4bf19','#ccc0da','#4bacc6']);
                drawPie('divNegTopic3',['登转机服务','空乘服务','票务服务','行李','品牌','驾驶安全性','机舱环境'],[2,2,2,5,3,0,0],'负面话题构 成',['#4f81bd','#9bbb59','#8064a2','#c0504d','#f2dddc','#c5d9f1','#e4bf19']);              
                drawPie('divDeal',['驾驶安全性','行李','登转机服务','空乘服务','品牌','票务服务','机舱环境','餐饮'],[0,3,1,0,1,0,0,1],'维护情况', ['#823331','#933b39','#a1423f','#ae4845','#ba4d4a','#c56765','#ce8a89','#d6a3a2','#dfb9b8']);
                drawPie('divDeal2',['登转机服务','空乘服务','票务服务','行李','品牌','驾驶安全性','机舱环境'],[1,0,0,1,0,0,0],'维护情况', ['#823331','#933b39','#a1423f','#ae4845','#ba4d4a','#c56765','#ce8a89','#d6a3a2','#dfb9b8']);
         }
          function drawColumn(divId,areaName,titleValue,colorName,Xvalue,Vvalue,KuanD) {
            //var areaName = ['负面','中立','正面'];
            var xLables = Xvalue;
            var areaValue = Vvalue;

            var data = new google.visualization.DataTable();
            data.addColumn('string', '品牌');
            for (var i = 0; i < areaName.length; ++i) {
                data.addColumn('number', areaName[i]);
            }
            data.addRows(xLables.length);
            for (var i = 0; i < xLables.length; ++i) {
                data.setCell(i, 0, xLables[i]);
            }
            for (var i = 0; i < areaName.length; ++i) {
                var country = areaValue[i];
                for (var x = 0; x < xLables.length; ++x) {
                    data.setCell(x, i + 1, country[x]);
                }
            }
            var ac = new google.visualization.ColumnChart(document.getElementById(divId));
            ac.draw(data, {
                title: titleValue,
                titleTextStyle: { fontSize: 16, fontName: '宋体' },
                legend: 'top',
                chartArea: { width: '70%', height: '60%' },
                fontSize: 12,
                colors: colorName,
                backgroundColor:'#FFFFFF',
                isStacked: true,
                width: KuanD,
                height: 300
            });
        }
        
        function drawColumn1(divId,areaName,titleValue,colorName,Xvalue,Vvalue,KuanD) {
            //var areaName = ['负面','中立','正面'];
            var xLables = Xvalue;
            var areaValue = Vvalue;

            var data = new google.visualization.DataTable();
            data.addColumn('string', '品牌');
            for (var i = 0; i < areaName.length; ++i) {
                data.addColumn('number', areaName[i]);
            }
                  
            data.addRows(xLables.length);
            for (var i = 0; i < xLables.length; ++i) {
                data.setCell(i, 0, xLables[i]);
            }
            for (var i = 0; i < areaName.length; ++i) {
                var country = areaValue[i];
                for (var x = 0; x < xLables.length; ++x) {
                     data.setCell(x, i + 1, country[x]);
                }
            }
            
            
            var format = new google.visualization.NumberFormat({ fractionDigits:0, suffix:'%' });
            var ac = new google.visualization.ColumnChart(document.getElementById(divId));
            ac.draw(data, {
                title: titleValue,
                titleTextStyle: { fontSize: 16, fontName: '宋体' },
                legend: 'left',
                fontSize: 12,
                colors: colorName,
                backgroundColor:'#FFFFFF',
                isStacked: true,
                vAxis: { maxValue: 100,logScale:false},
                width: KuanD,
                height: 300
            });
        }
        
        function drawPie(id,valueName,valueText,titleText,colorText) {
            var areaName = valueName;
            var areaValue = valueText;
            var data = new google.visualization.DataTable();
            data.addColumn('string', '态度');
            data.addColumn('number', "帖子数");
            data.addRows(areaName.length);
            for (var i = 0; i < areaName.length; ++i) {
                data.setCell(i, 0, areaName[i]);
                data.setCell(i, 1, areaValue[i]);
            }
            var ac = new google.visualization.PieChart(document.getElementById(id));
            ac.draw(data, {
                title: titleText,
                titleTextStyle: { fontSize: 16, fontName: '微软雅黑' },
                fontSize: 10,
                legend: 'top',
                colors: colorText,
                backgroundColor:'#FFFFFF',
                fontName:'微软雅黑',
                width: 260,
                height: 260
            });
        }
        
        
        google.setOnLoadCallback(drawChart);
  </script>
</head>
<body>
    <form name="form1" method="post" action="AviationWeekReport.aspx?zhou=week&value=3week2012-07- 01&brandid=30015" id="form1">
<div>
</div>
<div>	
</div>
    <div id="divDown" style="text-align:right; width:100%; margin-top:20px;" class="style1">   
            <input type="image" name="lbn_down" id="lbn_down" src="images/b-zhoubao.jpg" style="border-width:0px;"  />  </div>
            <div id="baogao" style="margin-top:15px; width:100%;">
            <div style="font-size: 20px; text-align: center; font-weight: bold;color: #6192A1">
                google图表小例</div>
              
            <div style="font-size: 14px; font-family:Arial; padding-top: 5px; text-align: center; color: #525556; line-height: 150%;">
                2012/7/16至2012/7/22</div>
            </div>
            <div id="Div1" style="font-size: 14px; padding-top: 20px; padding-left:30px; color: #525556; line-height: 150%;">
            </div>
            <div id="div_img" style="font-size: 14px; padding-left:30px; color: #525556; line-height: 150%;">
                <div id="ZChart" style="width:652px;"></div>
            </div>
            <div id="tongji" style="font-size: 14px; padding-left:30px; color: #525556; ">   
            <div id="div3" style="font-size: 14px; padding-left:10px; padding-top:20px; color: #525556; line-height: 150%;">
                <div id="divPositive" style="width:332px; float:left;"></div>
                <div id="divNegative" style="width:332px; float:left;"></div>
            </div>
            <div id="div4" style="font-size: 14px; padding-left:10px; color: #525556; line-height: 150%;">
                <div id="divNegService" style="width:652px;"></div>
            </div>
            <div id="fumiantongji" style="font-size: 14px; padding-top: 20px; padding-left:30px; color: #525556; line-height: 150%;">   
            <div id="div6" style="font-size: 14px; padding-left:10px; color: #525556; line-height: 150%;">
                <div id="divPostService" style="width:652px;"></div>
            </div>
            <div id="prodAttitdeHTML" style="font-size: 14px; padding-top: 20px; padding-left:30px; color: #525556; line-height:  150%;">   
            <div id="div5" style="font-size: 14px; padding-left:10px; padding-top:20px; color: #525556; line-height: 150%;">
                <div id="divNegTopic1" style="width:652px;"></div>
            </div>
            <div id="tongji2" style="font-size: 14px; padding-top: 20px; padding-left:30px; color: #525556; line-height: 150%;"></div>
            <div id="div7" style="font-size: 14px; padding-left:10px; padding-top:20px; color: #525556; line-height: 150%;">
                <div id="divNegTopic2" style="width:332px; float:left;"></div>
                <div id="divNegTopic3" style="width:332px; float:left;"></div>
            </div>
            <div id="fumiantongji2" style="font-size: 14px; padding-top: 20px; padding-left:30px; color: #525556; line-height: 150%;"> 
            <div id="fumiantongji3" style="font-size: 14px; padding-top: 20px; padding-left:30px; color: #525556; line-height: 150%;"> 
            <div id="IndustryHtml" style="font-size: 14px; padding-top: 20px; padding-left:30px; color: #525556; line-height:  150%;"></div>
            <div id="div2" style="font-size: 14px; padding-left:10px; padding-top:20px; color: #525556; line-height: 150%;">
                <div id="divDeal" style="width:652px;"></div>
             </div>
             <div id="DealDataHTML" style="font-size: 14px; padding-top: 20px; padding-left:30px; color: #525556; line-height:  150%;">   
            <div id="MediaHtml" style="font-size: 14px; padding-top: 20px; padding-left:30px; color: #525556; line-height: 150%;">   
            <div id="div8" style="font-size: 14px; padding-left:10px; padding-top:20px; color: #525556; line-height: 150%;">
                <div id="divDeal2" style="width:652px;"></div>
             </div>
             <div id="DealDataHTML2" style="font-size: 14px; padding-top: 20px; padding-left:30px; color: #525556; line-height:  150%;">   
            <div id="MediaHtml2" style="font-size: 14px; padding-top: 20px; padding-left:30px; color: #525556; line-height: 150%;">   
            <input name="downValue" type="hidden" id="downValue" />
            <input name="HidBrand" type="hidden" id="HidBrand" />
    </form>
</body>
</html>