Google图表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>