Javascript 将饼图与div的左上角对齐？

我有一个气泡图，里面是一些饼图。现在，我的重点是将饼图与各自的div对齐。饼图应该与div的左上角对齐，但是它们与中间对齐，而不响应我的

top:0px right:0px属性。这是我的：

HTML/CSS

<div id="chart_div"></div>

.whiteHat {
  border: none;
  width: 100px;
  position: absolute;
  background-color: red;
}

google.charts.load('current', {
  'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawSeriesChart);

function drawSeriesChart() {

  var data = google.visualization.arrayToDataTable([
    ['ID', 'Life Expectancy', 'Fertility Rate', 'Region', 'Population'],
    ['CAN', 80.66, 1.67, 'North America', 33739900],
    ['DEU', 79.84, 1.36, 'Europe', 81902307],
    ['DNK', 78.6, 1.84, 'Europe', 5523095],
    ['EGY', 72.73, 2.78, 'Middle East', 79716203],
    ['GBR', 80.05, 2, 'Europe', 61801570],
    ['IRN', 72.49, 1.7, 'Middle East', 73137148],
    ['IRQ', 68.09, 4.77, 'Middle East', 31090763],
    ['ISR', 81.55, 2.96, 'Middle East', 7485600],
    ['RUS', 68.6, 1.54, 'Europe', 141850000],
    ['USA', 78.09, 2.05, 'North America', 307007000]
  ]);

  var options = {
    title: 'Correlation between life expectancy, fertility rate ' +
      'and population of some world countries (2010)',
    hAxis: {
      title: 'Life Expectancy'
    },
    vAxis: {
      title: 'Fertility Rate'
    },
    bubble: {
      textStyle: {
        fontSize: 11
      }
    }
  };
  var container = document.getElementById('chart_div');
  var chart = new google.visualization.BubbleChart(document.getElementById('chart_div'));
  google.visualization.events.addListener(chart, 'ready', function() {
    var layout = chart.getChartLayoutInterface();
    for (var i = 0; i < data.getNumberOfRows(); i++) {
      // add image above every fifth element
      if (i % 5 == 0) {
        var xPos = layout.getXLocation(data.getValue(i, 1));
        var yPos = layout.getYLocation(data.getValue(i, 2));

        var data2 = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work', 11],
          ['Eat', 2],
          ['Commute', 2],
          ['Watch TV', 2],
          ['Sleep', 7]
        ]);
        var pie = document.getElementById('piechart');
        var whiteHat = container.appendChild(document.createElement('div'));
        whiteHat.className = 'whiteHat';
        whiteHat.style.top = yPos + 'px';
        whiteHat.style.left = xPos + 'px';
        new google.visualization.PieChart(whiteHat).draw(data2, {
          legend: {
            position: 'none'
          },
          backgroundColor: 'transparent',
          chartArea: {
            top: 0,
            left: 0,
            width: "100%",
            height: "100%"
          },
        });
      }
    }
  });
  chart.draw(data, options);
}


白帽先生{
边界：无；
宽度：100px；
位置：绝对位置；
背景色：红色；
}

JS

<div id="chart_div"></div>

.whiteHat {
  border: none;
  width: 100px;
  position: absolute;
  background-color: red;
}

google.charts.load('current', {
  'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawSeriesChart);

function drawSeriesChart() {

  var data = google.visualization.arrayToDataTable([
    ['ID', 'Life Expectancy', 'Fertility Rate', 'Region', 'Population'],
    ['CAN', 80.66, 1.67, 'North America', 33739900],
    ['DEU', 79.84, 1.36, 'Europe', 81902307],
    ['DNK', 78.6, 1.84, 'Europe', 5523095],
    ['EGY', 72.73, 2.78, 'Middle East', 79716203],
    ['GBR', 80.05, 2, 'Europe', 61801570],
    ['IRN', 72.49, 1.7, 'Middle East', 73137148],
    ['IRQ', 68.09, 4.77, 'Middle East', 31090763],
    ['ISR', 81.55, 2.96, 'Middle East', 7485600],
    ['RUS', 68.6, 1.54, 'Europe', 141850000],
    ['USA', 78.09, 2.05, 'North America', 307007000]
  ]);

  var options = {
    title: 'Correlation between life expectancy, fertility rate ' +
      'and population of some world countries (2010)',
    hAxis: {
      title: 'Life Expectancy'
    },
    vAxis: {
      title: 'Fertility Rate'
    },
    bubble: {
      textStyle: {
        fontSize: 11
      }
    }
  };
  var container = document.getElementById('chart_div');
  var chart = new google.visualization.BubbleChart(document.getElementById('chart_div'));
  google.visualization.events.addListener(chart, 'ready', function() {
    var layout = chart.getChartLayoutInterface();
    for (var i = 0; i < data.getNumberOfRows(); i++) {
      // add image above every fifth element
      if (i % 5 == 0) {
        var xPos = layout.getXLocation(data.getValue(i, 1));
        var yPos = layout.getYLocation(data.getValue(i, 2));

        var data2 = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work', 11],
          ['Eat', 2],
          ['Commute', 2],
          ['Watch TV', 2],
          ['Sleep', 7]
        ]);
        var pie = document.getElementById('piechart');
        var whiteHat = container.appendChild(document.createElement('div'));
        whiteHat.className = 'whiteHat';
        whiteHat.style.top = yPos + 'px';
        whiteHat.style.left = xPos + 'px';
        new google.visualization.PieChart(whiteHat).draw(data2, {
          legend: {
            position: 'none'
          },
          backgroundColor: 'transparent',
          chartArea: {
            top: 0,
            left: 0,
            width: "100%",
            height: "100%"
          },
        });
      }
    }
  });
  chart.draw(data, options);
}

google.charts.load（'current'{
“包”：[“核心图表”]
});
google.charts.setOnLoadCallback（drawSeriesChart）；
函数drawSeriesChart（）{
var data=google.visualization.arrayToDataTable([
[‘ID’、‘预期寿命’、‘生育率’、‘地区’、‘人口’]，
[CAN'，80.66,1.67'，北美'，33739900]，
[DEU'，79.84,1.36，'Europe'，81902307]，
[DNK'，78.6,1.84，'欧洲'，5523095]，
[EGY'，72.73，2.78，'中东'，79716203]，
[GBR'，80.05，2，'欧洲'，61801570]，
[IRN'，72.49，1.7，'中东'，73137148]，
[IRQ'，68.09，4.77，'中东'，31090763]，
[ISR'，81.55，2.96，'中东'，7485600]，
[RUS'，68.6，1.54，'Europe'，141850000]，
[美国，78.09，2.05，北美，307007000]
]);
变量选项={
标题：“预期寿命和生育率之间的相关性”+
"世界部分国家人口(2010)",，
哈克斯：{
标题：“预期寿命”
},
言辞：{
标题：“生育率”
},
气泡：{
文本样式：{
尺寸：11
}
}
};
var container=document.getElementById（'chart_div'）；
var chart=new google.visualization.BubbleChart（document.getElementById（'chart_div'））；
google.visualization.events.addListener（图表'ready'，函数（）{
var layout=chart.getChartLayoutInterface（）；
对于（var i=0；i

我只想将饼图与div的左上角对齐，我使用了一个红色背景来显示div。我如何解决这个问题？
我刚刚添加了这个CSS以使它看起来更好：

.whiteHat{
左：0！重要；
底部：0！重要；
宽度：50%！重要；
高度：自动！重要；
右：自动！重要；
顶部：自动！重要；
}
.whiteHat+.whiteHat{
左：自动！重要；
底部：0！重要；
宽度：50%！重要；
高度：自动！重要；
右：0！重要；
顶部：自动！重要；
}

我使用
的主要原因！重要信息
是覆盖插件使用内联样式生成的样式

预览


小提琴：

哎呀。左上角是吗？只需交换值

.whiteHat{
左：0！重要；
底部：自动！重要；
宽度：50%！重要；
高度：自动！重要；
右：自动！重要；
顶部：0！重要；
}
.whiteHat+.whiteHat{
左：自动！重要；
底部：自动！重要；
宽度：50%！重要；
高度：自动！重要；
右：0！重要；
顶部：0！重要；
}

预览


提琴：
谢谢你的回答，我确实需要把图表放在泡沫图表中，这就是我使用位置的原因absolute@user2896120您所说的是各自div的
div
？的左上角，就像我希望饼图位于其容器的左上角（红色背景）@用户2896120这是不可能的，因为这些图表被附加到
中，而不是它们各自的
中。您看到了在这个JSFIDLE中，图表是如何在红色背景的左上角对齐的吗？它可以工作，但是当您更改图表的大小时，它不会相应地工作。还是不可能吗？@WhiteHat出于某种原因，top:0和left:0根本没有响应