Javascript 使用json数组的圆环图
我正在学习d3,并试图在我的应用程序中使用d3库来显示一些可视化图表。我在这里以json的形式通过web api获取数据 我的脚本:Javascript 使用json数组的圆环图,javascript,d3.js,donut-chart,Javascript,D3.js,Donut Chart,我正在学习d3,并试图在我的应用程序中使用d3库来显示一些可视化图表。我在这里以json的形式通过web api获取数据 我的脚本: var data= "rows":[ { "STATUS" : "Active", "count" : "246" }, { "STATUS" : "Not Proceeded With", "count" : "40" } ] var width = 800
var data= "rows":[
{
"STATUS" : "Active",
"count" : "246"
},
{
"STATUS" : "Not Proceeded With",
"count" : "40"
}
]
var width = 800,
height = 250,
radius = Math.min(width, height) / 2;
var color = d3.scale.ordinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
var arc = d3.svg.arc()
.outerRadius(radius - 10)
.innerRadius(radius - 70);
var pie = d3.layout.pie()
.sort(null)
.value(function (d) {
return d.count;
});
var svg = d3.select("#chart").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var g = svg.selectAll(".arc")
.data(pie(data.rows))
.enter().append("g")
.attr("class", "arc");
g.append("path")
.attr("d", arc)
.style("fill", function (d) {
return color(d.data.rows.STATUS);
});
g.append("text")
.attr("transform", function (d) {
return "translate(" + arc.centroid(d) + ")";
})
.attr("dy", ".35em")
.style("text-anchor", "middle")
.text(function (d) {
return d.data.rows.STATUS;
});
现在,我想使用该数据集创建甜甜圈图表。我已经尝试过了,但没有成功。有谁能给我一些建议,告诉我如何解决以下几个问题:
1.)您的JSON无效:
var data = { //<- missing bracket
"rows": [
{
"STATUS": "Active",
"count": "246"
}, {
"STATUS": "Not Proceeded With",
"count": "40"
}
]
} //<- missing bracket
向我们展示您尝试过的javascript代码。我已经提到了上面的脚本。您能告诉我哪里出了错吗?很抱歉,没有主题,但您尝试过C3.js吗?这是一张基于D3的图表。非常感谢()不,我没听说过C3.Js…?你能在d3中帮助我吗..事实上我知道我犯了一个很小的错误..嗨,马克..非常感谢马克对我的适当帮助我真的很感激..)
return color(d.data.STATUS); //<-- don't need "rows", you only passed in data.rows