Question

试图让两个谷歌图表显示在一个页面上，尝试过其他解决方案，但它们似乎对我不起作用 - 我也不确定我做了什么错误，这将是令人难以置信的有用的知道。

    <script type="text/javascript">
      google.load("visualization", "1.0", {packages: ["bar"]});
      google.setOnLoadCallback(drawChart);

      function drawChart() {

//Various Data Tables 
        var data = google.visualization.arrayToDataTable([
          ['Country', 'Premarital Sex', 'Homosexuality', 'Divorce', 'Abortion', 'Euthanasia', 'Prostitution', 'General Violence', 'Beating Children', 'Stealing Benefits', 'Bribery', 'Stealing', 'Beating Wife'],
          ['West', 0.27, 0.34, 0.35, 0.43, 0.43, 0.67, 0.92, 0.93, 0.93, 0.94, 0.95, 0.96],
          ['Eastern Europe', 0.75, 0.89, 0.69, 0.77, 0.83, 0.92, 0.97, 0.90, 0.90, 0.97, 0.97, 0.92],
          ['MENA', 0.95, 0.92, 0.78, 0.92, 0.93, 0.95, 0.92, 0.77, 0.87, 0.95, 0.94, 0.86],
          ['South Asia', 0.76, 0.77, 0.75, 0.81, 0.77, 0.82, 0.81, 0.79, 0.75, 0.80, 0.82, 0.83],
          ['East Asia', 0.68, 0.75, 0.67, 0.79, 0.65, 0.84, 0.88, 0.68, 0.67, 0.91, 0.93, 0.92],
          ['Latin America', 0.58, 0.69, 0.60, 0.85, 0.80, 0.79, 0.92, 0.84, 0.77, 0.92, 0.93, 0.95],
          ['Sub Saharan Africa', 0.62, 0.75, 0.69, 0.74, 0.74, 0.76, 0.74, 0.56, 0.74, 0.75, 0.77, 0.77]

        ]);

        var data2 = google.visualization.arrayToDataTable([
          ['Country', 'Egalitarian Values', 'Premarital Sex', 'Abortion'],
          ['West',0.76,0.27,0.43],
          ['Eastern Europe',0.53,0.75,0.77],
          ['MENA',0.38,0.95,0.92],
          ['South Asia',0.45,0.76,0.81,],
          ['East Asia', 0.55,0.68,0.79,],
          ['Latin America',0.70,0.58,0.85],
          ['Sub Saharan Africa',0.51,0.62,0.74,]
        ]);

        var options = {
        colors: ['#ebf1f5', '#5e82a6'],
          chart: {
            title: 'Regional Means on Dependent and Independent Variables',
            subtitle: 'On a scale of 0 - 1',
          },
          vAxis: {
            viewWindowMode: 'explicit',
            viewWindow: {
              max: 1,
              min: 0
            }
          },
          bars: 'vertical', // Required for Material Bar Charts.
          width: 800,
          height: 350, 
        };

        var chart = new google.visualization.BarChart(document.getElementById('regionalmeans'));
        chart.draw(data, options);
        var chart2 = new google.visualization.BarChart(document.getElementById('depind'));
        chart.draw(data2, options);
      }
      draw(chart);
      draw(chart2);
    }
      </script>

</head>
<body>

<div id="regionalmeans"></div>
<div id="depind"></div>

Answer 1

几个问题......

需要加载包"corechart"才能绘制google.visualization.BarChart
"bar"包适用于材料图表 - google.charts.Bar
chart2已定义，但从未绘制过 chart被抽两次

参见以下示例......

google.load("visualization", "1.0", {packages: ["corechart"]});
google.setOnLoadCallback(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Country', 'Premarital Sex', 'Homosexuality', 'Divorce', 'Abortion', 'Euthanasia', 'Prostitution', 'General Violence', 'Beating Children', 'Stealing Benefits', 'Bribery', 'Stealing', 'Beating Wife'],
    ['West', 0.27, 0.34, 0.35, 0.43, 0.43, 0.67, 0.92, 0.93, 0.93, 0.94, 0.95, 0.96],
    ['Eastern Europe', 0.75, 0.89, 0.69, 0.77, 0.83, 0.92, 0.97, 0.90, 0.90, 0.97, 0.97, 0.92],
    ['MENA', 0.95, 0.92, 0.78, 0.92, 0.93, 0.95, 0.92, 0.77, 0.87, 0.95, 0.94, 0.86],
    ['South Asia', 0.76, 0.77, 0.75, 0.81, 0.77, 0.82, 0.81, 0.79, 0.75, 0.80, 0.82, 0.83],
    ['East Asia', 0.68, 0.75, 0.67, 0.79, 0.65, 0.84, 0.88, 0.68, 0.67, 0.91, 0.93, 0.92],
    ['Latin America', 0.58, 0.69, 0.60, 0.85, 0.80, 0.79, 0.92, 0.84, 0.77, 0.92, 0.93, 0.95],
    ['Sub Saharan Africa', 0.62, 0.75, 0.69, 0.74, 0.74, 0.76, 0.74, 0.56, 0.74, 0.75, 0.77, 0.77]

  ]);

  var data2 = google.visualization.arrayToDataTable([
    ['Country', 'Egalitarian Values', 'Premarital Sex', 'Abortion'],
    ['West',0.76,0.27,0.43],
    ['Eastern Europe',0.53,0.75,0.77],
    ['MENA',0.38,0.95,0.92],
    ['South Asia',0.45,0.76,0.81,],
    ['East Asia', 0.55,0.68,0.79,],
    ['Latin America',0.70,0.58,0.85],
    ['Sub Saharan Africa',0.51,0.62,0.74,]
  ]);

  var options = {
  colors: ['#ebf1f5', '#5e82a6'],
    chart: {
      title: 'Regional Means on Dependent and Independent Variables',
      subtitle: 'On a scale of 0 - 1',
    },
    vAxis: {
      viewWindowMode: 'explicit',
      viewWindow: {
        max: 1,
        min: 0
      }
    },
    bars: 'vertical', // Required for Material Bar Charts.
    width: 800,
    height: 350,
  };

  var chart = new google.visualization.BarChart(document.getElementById('regionalmeans'));
  chart.draw(data, options);
  var chart2 = new google.visualization.BarChart(document.getElementById('depind'));
  chart2.draw(data2, options);
}

<script src="https://www.google.com/jsapi"></script>
regionalmeans
<div id="regionalmeans"></div>
depind
<div id="depind"></div>

Answer 2

解决方案！

startChart();
          function startChart() {
              var data = new google.visualization.arrayToDataTable([
                     ['Country', 'Premarital Sex', 'Homosexuality', 'Divorce', 'Abortion', 'Euthanasia', 'Prostitution', 'General Violence', 'Beating Children', 'Stealing Benefits', 'Bribery', 'Stealing', 'Beating Wife'],
              ['West', 0.27, 0.34, 0.35, 0.43, 0.43, 0.67, 0.92, 0.93, 0.93, 0.94, 0.95, 0.96],
              ['Eastern Europe', 0.75, 0.89, 0.69, 0.77, 0.83, 0.92, 0.97, 0.90, 0.90, 0.97, 0.97, 0.92],
              ['MENA', 0.95, 0.92, 0.78, 0.92, 0.93, 0.95, 0.92, 0.77, 0.87, 0.95, 0.94, 0.86],
              ['South Asia', 0.76, 0.77, 0.75, 0.81, 0.77, 0.82, 0.81, 0.79, 0.75, 0.80, 0.82, 0.83],
              ['East Asia', 0.68, 0.75, 0.67, 0.79, 0.65, 0.84, 0.88, 0.68, 0.67, 0.91, 0.93, 0.92],
              ['Latin America', 0.58, 0.69, 0.60, 0.85, 0.80, 0.79, 0.92, 0.84, 0.77, 0.92, 0.93, 0.95],
              ['Sub Saharan Africa', 0.62, 0.75, 0.69, 0.74, 0.74, 0.76, 0.74, 0.56, 0.74, 0.75, 0.77, 0.77]
            ]);

              var data2 = google.visualization.arrayToDataTable([
              ['Country', 'Egalitarian Values', 'Premarital Sex', 'Abortion'],
              ['West',0.76,0.27,0.43],
              ['Eastern Europe',0.53,0.75,0.77],
              ['MENA',0.38,0.95,0.92],
              ['South Asia',0.45,0.76,0.81,],
              ['East Asia', 0.55,0.68,0.79,],
              ['Latin America',0.70,0.58,0.85],
              ['Sub Saharan Africa',0.51,0.62,0.74,]
            ]);
              options = {
              colors: ['#d82e03', '#5e82a6'],
              chart: {
                title: 'Regional Means of Negative Moral Judgement',
                subtitle: 'On a scale of 0 - 1',
              },
              vAxis: {
                viewWindowMode: 'explicit',
                viewWindow: {
                  max: 1,
                  min: 0
                }
              },
              bars: 'vertical', // Required for Material Bar Charts.
              width: 900,
              height: 450
            };
           var options2 = {
            colors: ['#ebf1f5', '#5e82a6', '#afc7d9'],
              chart2: {
                title: 'Regional Means on Dependent and Independent Variables',
                subtitle: 'On a scale of 0 - 1',
              },
              vAxis: {
                viewWindowMode: 'explicit',
                viewWindow: {
                  max: 1,
                  min: 0
                }
              },
              bars: 'vertical', // Required for Material Bar Charts.
              width: 900,
              height: 350
            };


      var chart = new google.visualization.ColumnChart(document.getElementById('regional'));
              chart.draw(data, options);

      var chart1 = new google.visualization.ColumnChart(document.getElementById('varmean'));
              chart1.draw(data2, options2);

          }

页面上有两个googlecharts？解决方案不起作用

2 个答案: