Question

             <svg id="test1" class="mypiechart">
    <svg width="210" height="210">
    <defs>
    <radialGradient gradientUnits="userSpaceOnUse" id="grad1" cx="50%" cy="50%" r="75%" fx="50%" fy="50%" gradientTransform="translate(-105,-105)">
    <stop offset="0%" stop-color="#000000" />
    <stop offset="50%" stop-color="#8b4299" />
    <stop offset="100%" stop-color="#000000" />
    </radialGradient>
    <radialGradient gradientUnits="userSpaceOnUse" id="grad2" cx="50%" cy="50%" r="75%" fx="50%" fy="50%" gradientTransform="translate(-105,-105)">
    <stop offset="0%" stop-color="#000000" />
    <stop offset="50%" stop-color="#269fd9" />
    <stop offset="100%" stop-color="#000000" />
    </radialGradient>
    <radialGradient gradientUnits="userSpaceOnUse" id="grad3" cx="50%" cy="50%" r="75%" fx="50%" fy="50%" gradientTransform="translate(-105,-105)">
    <stop offset="0%" stop-color="#000000" />
    <stop offset="50%" stop-color="#31bec1" />
    <stop offset="100%" stop-color="#000000" />
    </radialGradient>
    <radialGradient gradientUnits="userSpaceOnUse" id="grad4" cx="50%" cy="50%" r="75%" fx="50%" fy="50%" gradientTransform="translate(-105,-105)">
    <stop offset="0%" stop-color="#000000" />
    <stop offset="50%" stop-color="#a6ce39" />
    <stop offset="100%" stop-color="#000000" />
    </radialGradient>
    <radialGradient gradientUnits="userSpaceOnUse" id="grad5" cx="50%" cy="50%" r="75%" fx="50%" fy="50%" gradientTransform="translate(-105,-105)">
    <stop offset="0%" stop-color="#000000" />
    <stop offset="50%" stop-color="#e5b02c" />
    <stop offset="100%" stop-color="#000000" />
    </radialGradient>
    <radialGradient gradientUnits="userSpaceOnUse" id="grad6" cx="50%" cy="50%" r="75%" fx="50%" fy="50%" gradientTransform="translate(-105,-105)">
    <stop offset="0%" stop-color="#000000" />
    <stop offset="50%" stop-color="#ed1c24" />
    <stop offset="100%" stop-color="#000000" />
    </radialGradient>
    <radialGradient gradientUnits="userSpaceOnUse" id="grad7" cx="50%" cy="50%" r="75%" fx="50%" fy="50%" gradientTransform="translate(-105,-105)">
    <stop offset="0%" stop-color="#000000" />
    <stop offset="50%" stop-color="#e6dc33" />
    <stop offset="100%" stop-color="#000000" />
    </radialGradient>
    </defs>
    </svg>

    </svg>

我正在使用nvd3甜甜圈pi图表。我给了该图表的渐变颜色。它在chrome，IE和opera中工作，但不在firefox中工作。我不能以svg渐变格式给出浏览器前缀。但正常渐变它们在命令之前使用-moz-前缀。请帮助我。

这是我的脚本，

<script>
$(function () {
var datpie = '@Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(ViewBag.piechart))';
var cData = $.parseJSON(datpie);
console.log(cData);
var testdata1 =

$.each(cData, function (key, value) {
key = value.key;
y = value.y;
});


var testdata = testdata1;

var myColors = ["url(#grad1)", "url(#grad2)", "url(#grad3)", "url(#grad4)", "url(#grad5)", "url(#grad6)", "url(#grad7)"];
d3.scale.myColors = function () {
return d3.scale.ordinal().range(myColors);
};

nv.addGraph(function () {
var width = 328,
height = 300;

var chart = nv.models.pieChart()
.x(function (d) { return d.key })
.y(function (d) { return d.y })//Display pie labels
.color(d3.scale.myColors().range())
.labelType("percent") //Configure what type of data to show in the label. Can be "key", "value" or "percent"
.donut(true)          //Turn on Donut mode. Makes pie chart look tasty!
.donutRatio(.40)//Configure how big you want the donut hole size to be.
.showLabels(true)
.width(width)
.height(height);


d3.select("#test1")
.datum(testdata)
.transition().duration(1200)
.attr('width', width)

.attr('height', 250)
.call(chart);

d3.select(".nv-legendWrap").attr("transform", "translate(20,245)");
d3.select(".nvd3").attr("transform", "translate(20,10)");
chart.dispatch.on('stateChange', function (e) { nv.log('New State:', JSON.stringify(e)); });
for (var property in chart.legend.dispatch) {
chart.legend.dispatch[property] = function () { return };
}
return chart;
});




});
<script>

SVG Adding radial gradient to donut chart 以上链接一个例子圆环图就像我需要的那样。

Donut Chart svg Radial Gradient在Firefox中不起作用

0 个答案: