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 ......

＆＃13;

var createLocalCollection = function() {
    var values = My_First_Collection.find({datasetID: datasetID.get()}).fetch();
    var tempDoc = {};
    local.remove({});
    tempDoc = {};
    for (var i in values[0].value) {
      tempDoc.value = values[0].value[i];
      tempDoc.date = values[0].date[i];
      local.insert(tempDoc);
    }
};

＆＃13;

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);
}

＆＃13;

Google Graphs IE11 appendChild无效

1 个答案: