1

下面是谷歌图表的 Javascript。我在我的 html 中添加了以下内容,然后使用我合并了每个 id 的表编写了 html 代码。但是每个图表之间的空间从上到下和从左到右变得太多。即使我没有为表格提供任何 css 属性,我该如何控制它。

  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data1 = google.visualization.arrayToDataTable([
      ['Task', 'Question1'],
      ['I don’t know',     11],
      ['No',  49],
      ['Yes',      40]

    ]);

    var options1 = {
      title: 'Question1',
      pieHole: 0.4,
      chartArea:{left:8},
      'width': 400,
       'height': 400,
     colors: [ '#9bbb59', '#c0504d', '#4f81bd']
    };

    var data2 = google.visualization.arrayToDataTable([
      ['Task', 'Question2],
      ['Significant',     32],
      ['Moderate',      60],
      ['Minor', 8]

    ]);

    var options2 = {
      title: 'Question2'
      pieHole: 0.4,
      chartArea:{left:8},
      'width': 400,
       'height': 400,
      colors: ['#c0504d', '#9bbb59', '#4f81bd']
    };

    var data3 = google.visualization.arrayToDataTable([
      ['Task', 'Question3'],
      ['I don’t know',     24],
      ['From another platform',     11],
      ['Within the current team', 65]

    ]);

    var options3 = {
      title: 'Question3',
      pieHole: 0.4,
      chartArea:{left:8},
      'width': 400,
       'height': 400,
      colors: [ '#9bbb59', '#c0504d', '#4f81bd']
    };

    var data4 = google.visualization.arrayToDataTable([
      ['Task', 'Question4'],
      ['I don’t know',     16],
      ['No',  19],
      ['Yes',      65]

    ]);

    var options4 = {
      title: '4. Question4',
      pieHole: 0.4,
     chartArea:{left:8},
      'width': 400,
       'height': 400,

      colors: [ '#9bbb59', '#c0504d', '#4f81bd']
    };


    var data5 = google.visualization.arrayToDataTable([
      ['Task', 'Question5'],
      ['A clear, formalized and well distributed carried interest program',      38],
      ['The availability of equity in the GP', 24],
      ['Annual cash compensation that keeps up with the market',  22],
      ['Other (please specify)',     16]

    ]);

    var options5 = {
      title: 'Question5',
      position: 'left',
      legend : { position:"right"},
      pieHole: 0.4,
      chartArea:{left:0, width:"100%",height:"45%"},

      colors: ['#4f81bd', '#c0504d', '#9bbb59', '#8064a2']
    };


    var chart1 = new google.visualization.PieChart(document.getElementById('donutchart1'));
    chart1.draw(data1, options1);
    var chart2 = new google.visualization.PieChart(document.getElementById('donutchart2'));
    chart2.draw(data2, options2);
     var chart3 = new google.visualization.PieChart(document.getElementById('donutchart3'));
    chart3.draw(data3, options3);
     var chart4 = new google.visualization.PieChart(document.getElementById('donutchart4'));
    chart4.draw(data4, options4);
     var chart5 = new google.visualization.PieChart(document.getElementById('donutchart5'));
    chart5.draw(data5, options5);
  }
4

0 回答 0