Google Graphs IE11 appendChild 不工作

Question

我正在使用Google Graphs Scatter 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>