代码之家 › 专栏 › 技术社区 › Joe. L

将渐变添加到第三方纯色圆环图

donut-chart gradient svg css javascript

1

Joe. L · 技术社区 · 8 年前

我想为这个第三方甜甜圈图表创建渐变填充:

This is what I want it to looks like

这是js-fiddle链接:jsfiddle.net/kjoh57mf/

或参考以下内容:

JS公司:

var Ï = 2 * Math.PI,
      width = 100,
      height = 100,
      outerRadius = Math.min(width, height) / 2,
      innerRadius = (outerRadius / 5) * 4,
      fontSize = (Math.min(width, height) / 4);

    var arc = d3.svg.arc()
      .innerRadius(innerRadius)
      .outerRadius(outerRadius)
      .cornerRadius(outerRadius - innerRadius)
      .startAngle(0);

    var svg = d3.select('.chart-container').append("svg")
      .attr("width", '100%')
      .attr("height", '100%')
      .attr('viewBox', '0 0 ' + Math.min(width, height) + ' ' + Math.min(width, height))
      .attr('preserveAspectRatio', 'xMinYMin')
      .append("g")
      .attr("transform", "translate(" + Math.min(width, height) / 2 + "," + Math.min(width, height) / 2 + ")");

// Define the gradient
var gradient = svg.append("svg:defs")
    .append("svg:linearGradient")
    .attr("id", "gradient")
    .attr("x1", "0%")
    .attr("y1", "0%")
    .attr("x2", "100%")
    .attr("y2", "100%")
    .attr("spreadMethod", "pad");

// Define the gradient colors
gradient.append("svg:stop")
    .attr("offset", "0%")
    .attr("stop-color", "#96d2a9")
    .attr("stop-opacity", 1);

gradient.append("svg:stop")
    .attr("offset", "100%")
    .attr("stop-color", "#34BDA4")
    .attr("stop-opacity", 1);    

    var text = svg.append("text")
      .text('0%')
      .attr("text-anchor", "middle")
      .style("font-size", fontSize + 'px')
      .attr("dy", fontSize / 3)
      .attr("dx", 2);

    var background = svg.append("path")
      .datum({
        endAngle: Ï
      })
      .style("fill", "#7cc35f")
      .attr("d", arc);

    var midground = svg.append("path")
      .datum({
        endAngle: 0 * Ï
      })
      .style("fill", "lightblue")
      .attr("d", arc);

    var foreground = svg.append("path")
      .datum({
        endAngle: 0 * Ï
      })
      .style("fill", "#gradient")
      .attr("d", arc);

    midground.transition()
      .duration(750)
      .call(arcTween, 0 * Ï);

    foreground.transition()
      .duration(750)
      .call(arcTween, 0.45 * Ï);

    function arcTween(transition, newAngle) {

      transition.attrTween("d", function(d) {

        var interpolate = d3.interpolate(d.endAngle, newAngle);

        return function(t) {

          d.endAngle = interpolate(t);

          text.text(Math.round((d.endAngle / Ï) * 100) + '%');

          return arc(d);
        };
      });
    }

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
.chart-container {
  width: 50%;
  height: 50%;
  border: 1px dotted silver;
}
svg text {
  font-size: 1em;
  font-family: sans-serif;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.0/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
   <body>
    <div class = "chart-container"> </div>
  </body >

我尝试的解决方案是:

我尝试添加线性渐变并使用url:('#gradient')引用填充,但图形不会显示渐变。

以下是我尝试过的代码,但没有按预期工作:

我添加了这个

<defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> 
    <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" /> 
    <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />     
    </linearGradient> 
</defs>

耦合:.style(“fill”,“#grad1”);和.attr('fill','url(#grad1)');

开放式解决方案和改进。

1 回复 | 直到 8 年前

1

Paul LeBeau 8 年前

你的主要问题是你分配梯度的方式。您已经:

.style("fill", "#gradient")

当它应该是:

.style("fill", "url(#gradient)")

var Ï = 2 * Math.PI,
      width = 100,
      height = 100,
      outerRadius = Math.min(width, height) / 2,
      innerRadius = (outerRadius / 5) * 4,
      fontSize = (Math.min(width, height) / 4);

    var arc = d3.svg.arc()
      .innerRadius(innerRadius)
      .outerRadius(outerRadius)
      .cornerRadius(outerRadius - innerRadius)
      .startAngle(0);

    var svg = d3.select('.chart-container').append("svg")
      .attr("width", '100%')
      .attr("height", '100%')
      .attr('viewBox', '0 0 ' + Math.min(width, height) + ' ' + Math.min(width, height))
      .attr('preserveAspectRatio', 'xMinYMin')
      .append("g")
      .attr("transform", "translate(" + Math.min(width, height) / 2 + "," + Math.min(width, height) / 2 + ")");

// Define the gradient
var gradient = svg.append("defs")
    .append("linearGradient")
    .attr("id", "gradient")
    .attr("x1", "0%")
    .attr("y1", "0%")
    .attr("x2", "100%")
    .attr("y2", "100%");

// Define the gradient colors
gradient.append("stop")
    .attr("offset", "0%")
    .attr("stop-color", "#96d2a9")
    .attr("stop-opacity", 1);

gradient.append("stop")
    .attr("offset", "100%")
    .attr("stop-color", "#34BDA4")
    .attr("stop-opacity", 1);    

    var text = svg.append("text")
      .text('0%')
      .attr("text-anchor", "middle")
      .style("font-size", fontSize + 'px')
      .attr("dy", fontSize / 3)
      .attr("dx", 2);

    var background = svg.append("path")
      .datum({
        endAngle: Ï
      })
      .style("fill", "#7cc35f")
      .attr("d", arc);

    var midground = svg.append("path")
      .datum({
        endAngle: 0 * Ï
      })
      .style("fill", "lightblue")
      .attr("d", arc);

    var foreground = svg.append("path")
      .datum({
        endAngle: 0 * Ï
      })
      .style("fill", "url(#gradient)")
      .attr("d", arc);

    midground.transition()
      .duration(750)
      .call(arcTween, 0 * Ï);

    foreground.transition()
      .duration(750)
      .call(arcTween, 0.45 * Ï);

    function arcTween(transition, newAngle) {

      transition.attrTween("d", function(d) {

        var interpolate = d3.interpolate(d.endAngle, newAngle);

        return function(t) {

          d.endAngle = interpolate(t);

          text.text(Math.round((d.endAngle / Ï) * 100) + '%');

          return arc(d);
        };
      });
    }

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
.chart-container {
  width: 50%;
  height: 50%;
  border: 1px dotted silver;
}
svg text {
  font-size: 1em;
  font-family: sans-serif;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.0/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
   <body>
    <div class = "chart-container"> </div>
  </body >