调用 google方法生成饼图、条形图、表格

最新推荐文章于 2021-07-01 15:05:19 发布

hjingtao

最新推荐文章于 2021-07-01 15:05:19 发布

阅读量3.9k

点赞数

文章标签： string server div colors dataset visualization

本文链接：https://blog.csdn.net/hjingtao/article/details/7775056

版权

这个博客展示了如何利用Google的JavaScript库来绘制饼图、条形图和表格。代码中定义了多个函数，如drawChart、drawColumn和drawPie，用于根据指定数据动态生成图表。这些图表包括不同类型的舆情信息量比较、媒体类型构成和地理分布等，可用于展示和分析品牌在网络上的表现。

摘要由CSDN通过智能技术生成

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WeekReport.aspx.cs" Inherits="IWOMTrends.WeekReport" EnableViewState="false" %>

<!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>
    <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(){
         
            var bid=document.getElementById("<%=HidBrand.ClientID %>");
            if(bid.value!='30007'){
                drawColumn('ZChart',['负面','中立','正面'],'一周信息量比较',['#C0504D' ,'#4F81BD' , '#9BBB59'],[<%=WeekXValue %>],[<%=WeekValueArr %>],500);
                drawColumn('divPositive',['正面'],'一周正面信息量比较',['#9BBB59'],[<%=WeekXValue %>],[<%=Positive %>],330);
                drawColumn('divNegative',['负面'],'一周负面信息量比较',['#C0504D'],[<%=WeekXValue %>],[<%=Negative %>],330);
                
                drawColumn1('divNegService',[<%=NegServiceY %>],'负面媒体类型构成',['#4572A7','#AA4643','#89A54E','#71588F','#4198AF','#DB843D'],[<%=NegServiceX %>],[<%=NegServiceVal %>],550);
                drawColumn1('divPostService',[<%=PostServiceY %>],'正面媒体类型构成',['#4572A7','#AA4643','#89A54E','#71588F','#4198AF','#DB843D'],[<%=PostServiceX %>],[<%=PostServiceVal %>],550);
                
                drawColumn('divNegTopic1',['信息量'],'WSE负面信息地理分布',['#C0504D'],[<%=NegAreaX %>],[<%=NegAreaVal %>],600);
                
                drawPie('divNegTopic2',[<%=NegTopicX %>],[<%=NegTopicVal %>],'负面话题构成',['#4f81bd','#9bbb59','#8064a2','#c0504d','#f2dddc','#c5d9f1','#e4bf19','#ccc0da','#4bacc6']);
                drawPie('divIndustryTopic',[<%=IndustryX %>],[<%=IndustryVal %>],'行业信息内容构成',['#9bbb59','#4f81bd','#c0504d','#8064a2','#e4bf19']);
                drawPie('divDeal',[<%=DealDataX %>],[<%=DealDataVal %>],'维护信息的内容情况',['#823331','#933b39','#a1423f','#ae4845','#ba4d4a','#c56765','#ce8a89','#d6a3a2','#dfb9b8','#e7cccc']);
            }
         }
         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.visual