google图表小例

关注

原创最新推荐文章于 2026-08-26 18:42:37 发布 796 阅读 AI 写同款· GEO 优化 ›

9个可视化图表在线制作工具，总有一款适合你这份清单包含了最受欢迎的大数据可视化分析的工具，无论你是需要对数据进行分析，还是利用可视化图表向你的客户或同事进行展示，该表单中总会有一款工具能够满足你的需求。数据可视化无处不在，无论是PPT演示还是用可视化概念来细分客户，数据可视化都显得尤为重要。以前的可视化图表在线制作工具基本不能处理大数据。现在为大家推荐5个可用于处理大数据的可视化可视化图表在线制作工具。其中部分工具是开源的，部分工具不需要任何编程语言基础。阅读详情

<!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>

收录于