使用 SVG 在 Google Data Studio 中创建自定义可视化

Question

我目前正在尝试将 SVG Radial Scorecard 库移植到 Google Data Studio - 但我总是得到空白的可视化效果。

这是在 html 中有效的代码 https://codepen.io/grant-kemp/pen/NJoYLB

<div class="flex-wrapper">

  <div class="single-chart">
    <svg viewBox="0 0 36 36" class="circular-chart blue">
      <path class="circle-bg"
        d="M18 2.0845
          a 15.9155 15.9155 0 0 1 0 31.831
          a 15.9155 15.9155 0 0 1 0 -31.831"
      />
      <path class="circle"
        stroke-dasharray="90, 100"
        d="M18 2.0845
          a 15.9155 15.9155 0 0 1 0 31.831
          a 15.9155 15.9155 0 0 1 0 -31.831"
      />
      <text x="18" y="20.35" class="percentage">90%</text>
      <text x="18" y="12" class="percentageLabel">Mobile</text>
    </svg>
  </div>
</div>

CSS:

.flex-wrapper {
  display: flex;
  flex-flow: row nowrap;
}

.single-chart {
  width: 33%;
  justify-content: space-around ;
}

.circular-chart {
  display: block;
  margin: 10px auto;
  max-width: 80%;
  max-height: 250px;
}

.circle-bg {
  fill: none;
  stroke: #eee;
  stroke-width: 3.8;
}

.circle {
  fill: none;
  stroke-width: 2.8;
  stroke-linecap: round;
  animation: progress 1s ease-out forwards;
}

@keyframes progress {
  0% {
    stroke-dasharray: 0 100;
  }
}

.circular-chart.orange .circle {
  stroke: #ff9f00;
}

.circular-chart.green .circle {
  stroke: #4CC790;
}

.circular-chart.blue .circle {
  stroke: #3c9ee5;
}

.percentage {
  fill: #667 ;
  font-family: sans-serif;
  font-size: 0.5em;
  text-anchor: middle;
}
.percentageLabel {
  fill: #667 ;
  font-family: sans-serif;
  font-size: 0.2em;
  text-anchor: middle;
}

当我尝试将它移植到 JS 以在 Data studio 中工作时，我使用了它，它似乎给我一个空白屏幕。（并且没有错误）

数据工作室代码

function drawViz(data) {
  var height = dscc.getHeight();
  var width = dscc.getWidth();
  console.log("drawing")
  console.log("data is "+data);

  var newDiv = document.createElement('div')
newDiv.class = "flex-wrapper"
var chartDiv = document.createElement('single-chart');
chartDiv.innerText = "test"

var chartSVG = document .createElementNS("http://www.w3.org/2000/svg", "svg");
chartSVG.setAttribute("viewBox","0 0 36 36")
chartSVG.setAttributeNS(null, "class",  "circular-chart orange");
var newPath1 = document.createElementNS("http://www.w3.org/2000/svg","path");
newPath1.setAttributeNS(null, "class", "circle-bg");
newPath1.setAttributeNS(null, "d", "M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831");
chartSVG.appendChild(newPath1);
var newPath2 = document.createElementNS("http://www.w3.org/2000/svg","path");
newPath2.setAttributeNS(null, "class", "circle");
newPath2.setAttributeNS(null, "stroke-dasharray", "30, 100");
newPath2.setAttributeNS(null, "d", "M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831");
chartSVG.appendChild(newPath2);

var text = document.createElement("text")
text.setAttribute("x","18")
text.setAttribute("y","20.35")
text.setAttribute("class","percentage")
text.innerText = "30%"
chartSVG.appendChild(text)

chartDiv.appendChild.chartSVG
  newDiv.appendChild(chartDiv)
document.body.appendChild(newDiv)
}

// subscribe to data and style changes.
dscc.subscribeToData(drawViz, {transform: dscc.objectTransform});

Answer 1

我最终使用了一个不依赖 SVG 的替代库。

我确定支持此方法，但我没有时间深入研究。

一旦我在 Github

上找到 post link 的解决方案

使用 SVG 在 Google Data Studio 中创建自定义可视化

Creating Custom visualisations in Google Data Studio using SVG

google-data-studio

data-studio-custom-visuals