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>