gpt4 book ai didi

javascript - 如何在不使用 JSON 对象中的 "label"和 "value"的情况下制作 NVD3 饼图?

转载 作者:行者123 更新时间:2023-12-02 17:22:49 26 4
gpt4 key购买 nike

下面的代码需要 JSON 对象来指定“值”和“标签”。我想这样做,以便可以使用任何键名称创建饼图。

//Regular pie chart example
nv.addGraph(function() {
var chart = nv.models.pieChart()
.x(function(d) { return d.label })
.y(function(d) { return d.value })
.showLabels(true);

d3.select("#chart svg")
.datum(exampleData())
.transition().duration(350)
.call(chart);

return chart;
});

上面的函数可以修改为返回 d.fruit 和 d.number 来创建 JSON 对象 [{"fruit": "apple", "number": 1}] 的饼图,但我想要这个适用于任何 JSON 对象,无论键名称如何。

#chart svg {
height: 400px;
}

</style>


<div id="chart">
<svg></svg>
</div>
</head>

<body>
<script>
//Regular pie chart example
nv.addGraph(function() {
var chart = nv.models.pieChart()
.x(function(d) { return d.label })
.y(function(d) { return d.value })
.showLabels(true);

d3.select("#chart svg")
.datum(exampleData())
.transition().duration(350)
.call(chart);

return chart;
});

//Donut chart example
nv.addGraph(function() {
var chart = nv.models.pieChart()
.x(function(d) { return d.label })
.y(function(d) { return d.value })
.showLabels(true) //Display pie labels
.labelThreshold(.05) //Configure the minimum slice size for labels to show up
.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(0.35) //Configure how big you want the donut hole size to be.
;

d3.select("#chart2 svg")
.datum(exampleData())
.transition().duration(350)
.call(chart);

return chart;
});

//Pie chart example data. Note how there is only a single array of key-value pairs.
function exampleData() {
return [
{"value":"1","label":"apples"},{"value":"2","label":"bananas"}
];
}
</script>
</body>


</html>

最佳答案

var chart = nv.models.pieChart()
.x(function(d) { //always spits out first memeber of object
var val, x;
val = 0;
x = 0;
for (i in d) {
if (x++ === val)
{
return d[i];
}
}
})
.y(function(d) { //always spits out second member of object
var val, x;
val = 1;
x = 0;
for (i in d) {
if (x++ === val)
{
return d[i];
}
}
})

关于javascript - 如何在不使用 JSON 对象中的 "label"和 "value"的情况下制作 NVD3 饼图?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23764644/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com