googlecharts没有显示第二张图表

Question

我遇到的问题是我的仪表板没有显示第二张图表。我尝试了不同的版本并阅读了几个线程，但我自己无法解决它。数据表中填充了来自mysql-db的数据并且是正确的（两者都可以在只有一个数据表和一个图表的仪表板上正常工作！）。

继承我的代码：

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

     // Load the Visualization API and the piechart package.
google.load('visualization', '1', {packages: ['controls']});
    </script>
    <script type="text/javascript">




function drawChart() {
        dashboard1 = createDashboard1();
        dashboard2 = createDashboard2();
}

function createDashboard1() {


var data = new google.visualization.DataTable();
    data.addColumn("string", "Name");
    data.addColumn("number", "Wert");
    data.addColumn("string", "Datum");
    data.addRows([[" Apple iTunes ",1054771,"2014-07-04"],
                  [" Apple iTunes ",1139032,"2014-07-08"],
                  [" Apple iTunes ",1141890,"2014-06-23"],
                  [" Apple iTunes ",1140293,"2014-06-24"],
                  [" Apple iTunes ",1105672,"2014-07-07"],
                  [" Apple iTunes ",925948,"2014-06-26"],
                  [" Apple iTunes ",1054772,"2014-07-05"],
                  [" Google Play Store ",1285270,"2014-07-07"],
                  [" Google Play Store ",1281289,"2014-07-05"],
                  [" Google Play Store ",1279384,"2014-07-04"],
                  [" Google Play Store ",1261568,"2014-06-20"],
                  [" Google Play Store ",1270873,"2014-06-26"],
                  [" Google Play Store ",1269927,"2014-06-24"],
                  [" Google Play Store ",1268064,"2014-06-23"],
                  [" Google Play Store ",1286660,"2014-07-08"]]);

var datePicker = new google.visualization.ControlWrapper({
    'controlType': 'CategoryFilter',
        'containerId': 'control1',
        'options': {
        'filterColumnLabel': 'Datum',
            'ui': {
            'labelStacking': 'vertical',
                'allowTyping': true,
                'allowMultiple': false,
                'allowNone': false
        }
    }
});

var dataPicker = new google.visualization.ControlWrapper({
    'controlType': 'CategoryFilter',
    'containerId': 'control2',
    'options': {
        'filterColumnLabel': 'Name',
            'ui': {

            'labelStacking': 'vertical',
                'allowTyping': true,
                'allowMultiple': true,
                'caption': 'Wert wählen',
                'selectedValuesLayout': 'belowStacked'
        }
    }
});

var chart = new google.visualization.ChartWrapper({
    'containerId': 'chart1',
    'chartType':'PieChart',
    'view': {'columns': [0,1]
    }       
});

function setOptions(wrapper) {
    wrapper.setOption('height', 400);
    wrapper.setOption('width' , 600);
    wrapper.setOption('chartArea.width','80%');
    wrapper.setOption('animation.duration',0);
    wrapper.setView({'columns':[0,1]});
    wrapper.setOption('colors',['#E20074','#FDD167','#EDA95A','#9F5C97','#64B9E4','#427BAB','#408F9A','#BABD5A','#000000','#A4A4A4','#7C7C7C','#6C6C6C','#EDEDED','#4B4B4B','#D0D0D0']);
    wrapper.setOption('title', 'Verteilung AppStores');
    wrapper.setOption('tooltip',{'text':'percentage'});
};

setOptions(chart);

 var dash = new google.visualization.Dashboard(document.getElementById('dashboard')).
 bind([datePicker],[dataPicker]).bind([dataPicker],[chart]).
 draw(data);
}

function createDashboard2(){

var data = new google.visualization.DataTable();
data.addColumn("string", "Datum");
data.addColumn("number", "Google Play Store");
data.addColumn("number", "Apple iTunes");
data.addRows([["2014-06-20",1261568,0],
              ["2014-06-23",1268064,1141890],
              ["2014-06-24",1269927,1140293],
              ["2014-06-26",1270873,925948],
              ["2014-07-04",1279384,1054771],
              ["2014-07-05",1281289,1054772],
              ["2014-07-07",1285270,1105672],
              ["2014-07-08",1286660,1139032]]);

var chart = new google.visualization.ChartWrapper({
    'containerId':'chart2',
    'chartType':'ColumChart'                
});

setOptions(chart);

function setOptions(wrapper) {
    wrapper.setOption('height', 400);
    wrapper.setOption('width' , 600);
    wrapper.setOption('chartArea.width','80%');
    wrapper.setOption('animation.duration',0);
    wrapper.setOption('colors',`['#E20074','#FDD167','#EDA95A','#9F5C97','#64B9E4','#427BAB','#408F9A','#BABD5A','#000000','#A4A4A4','#7C7C7C','#6C6C6C','#E`DEDED','#4B4B4B','#D0D0D0']);
    wrapper.setOption('title', 'Verteilung Android (Version)');
    wrapper.setOption('tooltip',{'text':'percentage'});
};


var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard')).
draw(data);
}

google.setOnLoadCallback(drawChart);

</script>

</head>
<body>
    <div id="dashboard">
        <table>
            <tr style='vertical-align: top'>
                <td>
                    <div id="control1"></div>
                    <div id="control2"></div>
                </td>
                <td>
                    <div style="float: left;" id="chart1"></div>
                    <div style="float: left;" id="chart2"></div>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

任何建议出了什么问题？

问候，olli

Answer 1

问题的根源在于，当您更改示例时，重新构建了仪表板和控件，以便chart1有两个绑定到它的控件，而chart2没有。因此，chart2从未绑定到仪表板。一般来说不是问题（图表可以存在于其自身），但您正在尝试使用仪表板绘制图表。

一旦我修复了，我还发现你的dashboard2功能并没有真正将你的选项分配给你的图表（你在函数中声明了它然后从未调用过它？）所以我重新构造了一下，将数据添加到图表中（在它被发送到仪表板之前）并且瞧！这是您网页的有效版本。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>
      Google Visualization API Sample
    </title>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

        // Load the Visualization API and the piechart package.
        google.load('visualization', '1', {packages: ['controls']});
    </script>
    <script type="text/javascript">




        function drawChart() {
            dashboard1 = createDashboard1();
            dashboard2 = createDashboard2();
        }

        function createDashboard1() {


            var data = new google.visualization.DataTable();
            data.addColumn("string", "Name");
            data.addColumn("number", "Wert");
            data.addColumn("string", "Datum");
            data.addRows([[" Apple iTunes ",1054771,"2014-07-04"],
                          [" Apple iTunes ",1139032,"2014-07-08"],
                          [" Apple iTunes ",1141890,"2014-06-23"],
                          [" Apple iTunes ",1140293,"2014-06-24"],
                          [" Apple iTunes ",1105672,"2014-07-07"],
                          [" Apple iTunes ",925948,"2014-06-26"],
                          [" Apple iTunes ",1054772,"2014-07-05"],
                          [" Google Play Store ",1285270,"2014-07-07"],
                          [" Google Play Store ",1281289,"2014-07-05"],
                          [" Google Play Store ",1279384,"2014-07-04"],
                          [" Google Play Store ",1261568,"2014-06-20"],
                          [" Google Play Store ",1270873,"2014-06-26"],
                          [" Google Play Store ",1269927,"2014-06-24"],
                          [" Google Play Store ",1268064,"2014-06-23"],
                          [" Google Play Store ",1286660,"2014-07-08"]]);

            var datePicker = new google.visualization.ControlWrapper({
                'controlType': 'CategoryFilter',
                'containerId': 'control1',
                'options': {
                    'filterColumnLabel': 'Datum',
                    'ui': {
                        'labelStacking': 'vertical',
                        'allowTyping': true,
                        'allowMultiple': false,
                        'allowNone': false
                    }
                }
            });

            var dataPicker = new google.visualization.ControlWrapper({
                'controlType': 'CategoryFilter',
                'containerId': 'control2',
                'options': {
                    'filterColumnLabel': 'Name',
                    'ui': {

                        'labelStacking': 'vertical',
                        'allowTyping': true,
                        'allowMultiple': true,
                        'caption': 'Wert wählen',
                        'selectedValuesLayout': 'belowStacked'
                    }
                }
            });

            var chart = new google.visualization.ChartWrapper({
                'containerId': 'chart1',
                'chartType':'PieChart',
                'view': {'columns': [0,1]
                }       
            });

            function setOptions(wrapper) {
                wrapper.setOption('height', 400);
                wrapper.setOption('width' , 600);
                wrapper.setOption('chartArea.width','80%');
                wrapper.setOption('animation.duration',0);
                wrapper.setView({'columns':[0,1]});
                wrapper.setOption('colors',['#E20074','#FDD167','#EDA95A','#9F5C97','#64B9E4','#427BAB','#408F9A','#BABD5A','#000000','#A4A4A4','#7C7C7C','#6C6C6C','#EDEDED','#4B4B4B','#D0D0D0']);
                wrapper.setOption('title', 'Verteilung AppStores');
                wrapper.setOption('tooltip',{'text':'percentage'});
            };

            setOptions(chart);

            var dash = new google.visualization.Dashboard(document.getElementById('dashboard')).
            bind([datePicker],[dataPicker]).bind([dataPicker],[chart]).
            draw(data);
        }

        function createDashboard2(){

            var data = new google.visualization.DataTable();
            data.addColumn("string", "Datum");
            data.addColumn("number", "Google Play Store");
            data.addColumn("number", "Apple iTunes");
            data.addRows([["2014-06-20",1261568,0],
                          ["2014-06-23",1268064,1141890],
                          ["2014-06-24",1269927,1140293],
                          ["2014-06-26",1270873,925948],
                          ["2014-07-04",1279384,1054771],
                          ["2014-07-05",1281289,1054772],
                          ["2014-07-07",1285270,1105672],
                          ["2014-07-08",1286660,1139032]]);

            var chart = new google.visualization.ChartWrapper({
                'containerId':'chart2',
                'chartType':'ColumnChart'                
            });

            chart.setDataTable(data);

            chart.setOptions( {
                height: 400,
                width: 600,
                chartArea:{
                    width: '80%'
                },
                animation: {
                    duration: 0
                },
                colors:     ['#E20074','#FDD167','#EDA95A','#9F5C97','#64B9E4','#427BAB','#408F9A','#BABD5A','#000000','#A4A4A4','#7C7C7C','#6C6C6C','#E`DEDED','#4B4B4B','#D0D0D0'],
                title: 'Verteilung Android (Version)',
                tooltip:{
                    'text':'percentage'}
            });


            chart.draw();
        }

        google.setOnLoadCallback(drawChart);

</script>

</head>
<body>
    <div id="dashboard">
        <table>
            <tr style='vertical-align: top'>
                <td>
                    <div id="control1"></div>
                    <div id="control2"></div>
                </td>
                <td>
                    <div style="float: left;" id="chart1"></div>
                    <div style="float: left;" id="chart2"></div>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>​