Google 图 IE11 appendChild 不工作

Question

我正在使用 Google Graphs Scatter Chart to make the following chart 。

这在像 Chrome 这样的浏览器中工作正常，但是当涉及到 IE(V11) 时，我收到以下错误 Unable to get property 'children' of undefined or null reference。该图仍然可以正常加载，但圆圈是纯色的。

现在我知道这与用于设置圆圈样式的代码有关（见下文）

google.visualization.events.addListener(chart, 'ready', function(){
                            $('circle').each(function() {
              var $c = $(this);

              var circles = document.createElementNS("http://www.w3.org/2000/svg", "circle");
              circles.setAttribute("cx",$c.attr('cx'));
              circles.setAttribute("cy",$c.attr('cy'));
              circles.setAttribute("r",$c.attr('r'));
              circles.setAttribute("fill",$c.attr('fill'));
              circles.setAttribute("stroke",'white');                  
              circles.setAttribute("stroke-width",'3');                  
              this.parentElement.appendChild(circles);

              circles = document.createElementNS("http://www.w3.org/2000/svg", "circle");
              circles.setAttribute("cx",$c.attr('cx'));
              circles.setAttribute("cy",$c.attr('cy'));
              circles.setAttribute("r", "4");
              circles.setAttribute("fill","white");
              this.parentElement.appendChild(circles);                  
                            })


       });

我需要一种在 IE11+ 中设置圆圈样式的方法。我还为图表创建了 jsfiddle。

谢谢

Answer 1

您可以使用 style role 来格式化点，而不是手动修改 SVG...

google.load('visualization', '1', {'packages': ['corechart'], 'callback': drawChart});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Age', 'Weight', {type: 'string', role: 'style'}],
    [ 8,     12,       'stroke-color: red;    stroke-width: 3; fill-color: white;'],
    [ 4,     15,       'stroke-color: orange; stroke-width: 3; fill-color: white;'],
    [ 11,    14,       'stroke-color: yellow; stroke-width: 3; fill-color: white;'],
    [ 4,     5,        'stroke-color: green;  stroke-width: 3; fill-color: white;'],
    [ 3,     3.5,      'stroke-color: blue;   stroke-width: 3; fill-color: white;'],
    [ 6.5,   7,        'stroke-color: violet; stroke-width: 3; fill-color: white;']
  ]);

  var options = {
    title: 'Age vs. Weight comparison',
    hAxis: {title: 'Age', minValue: 0, maxValue: 15},
    vAxis: {title: 'Weight', minValue: 0, maxValue: 15},
    legend: 'none',
    pointSize: 10
  };

  var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));

  chart.draw(data, options);
}

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

Google 图 IE11 appendChild 不工作

Google Graphs IE11 appendChild not working

javascript

jquery

internet-explorer

google-visualization

appendchild