作者热门文章
- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我正在使用 NVD3 制作一个简单的饼图示例。它呈现正确,但没有响应。我试着关注 this answer让它响应,但还没有完全做到。
我做了一个fiddle .事实上,它是响应式的,但我无法将图表放入容器中。我的js代码:
nv.addGraph(function() {
var chart = nv.models.pieChart()
.x(function(d) { return d.label })
.y(function(d) { return d.value })
.showLabels(true);
var $container = $('#chart'),
width = $container.width(),
height = $container.height();
d3.select("#chart svg")
.attr("width", '100%')
.attr("height", '100%')
.attr('viewBox','0 0 '+Math.min(width,height)+' '+Math.min(width,height))
.attr('preserveAspectRatio','xMinYMin')
.attr("transform", "translate(" + Math.min(width,height) / 2 + "," + Math.min(width,height) / 2 + ")")
.datum(exampleData)
.transition().duration(350)
.call(chart);
return chart;
});
var exampleData = [
{
"label": "One",
"value" : 29.765957771107
} ,
{
"label": "Two",
"value" : 0
} ,
{
"label": "Three",
"value" : 32.807804682612
} ,
{
"label": "Four",
"value" : 196.45946739256
} ,
{
"label": "Five",
"value" : 0.19434030906893
} ,
{
"label": "Six",
"value" : 98.079782601442
} ,
{
"label": "Seven",
"value" : 13.925743130903
} ,
{
"label": "Eight",
"value" : 5.1387322875705
}
];
如何使图表正确适合百分比大小的 div?
最佳答案
完成。 viewBox 属性按顺序列出图形的最小宽度、最小高度、宽度和高度。因此,我将最后两个值更改为使用宽度和高度。并在 css 中放置一个 min-height 属性,以使其适应不断变化的窗口大小。
.attr('viewBox','0 0 '+width+' '+height)
还有 fiddle .
另一种选择是使用 nv 的 update() 方法:
nv.addGraph(function() {
var chart = nv.models.pieChart()
.x(function(d) { return d.label })
.y(function(d) { return d.value })
.showLabels(true);
var $container = $('#chart'),
width = $container.width(),
height = $container.height();
d3.select("#chart svg")
.datum(exampleData)
.transition().duration(350)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
关于javascript - 使用 NVD3 的响应式饼图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35625038/
有人可以帮我理解为什么我的饼图百分比计算不正确吗?看截图: 根据我的计算,如 RHS 上所示,支出百分比应为 24.73%。传递给 Highcharts 的值如下:- 花费:204827099.36-
我正在制作圆环饼图。 我设置数据的颜色并获取钻取(它是保存外部切片的数据和配置的对象)切片的颜色为同一组颜色。我想设置要在向下钻取对象中使用的不同颜色数组。请参阅附图(外层切片有两种颜色:橙色和透明)
我是一名优秀的程序员,十分优秀!