在移动视图中时,d3甜甜圈图不完全可见 [英] d3 donut chart not visible entirely when in mobile view
问题描述
我正在使用d3甜甜圈图显示一些数据,如下所示,但是,当我切换到移动视图时,图表无法正确显示,如何使它工作或在移动视图中显示整个甜甜圈和详细信息?
I am showing up some data using d3 donut chart as shown below, however when I switch to mobile view, chart is not visible properly how can I make it work or make it show entire donut and details in mobile view ?
var width = $(".chart-time-spent").width(), height = 250, radius = Math.min(width, height) / 2, legendPosY = (height / 2) - 20;
var color = d3.scale.ordinal().range(["#99ecf0", "#1cb5bb", "#10538c", "#75c6f3", "#60d3ff", "#4ec3d7", "#37c2a5", "#8bcb6b"]);
var API = apiUrl+"getDeviceCounters";
console.log("deviceController api_> "+API);
var arc = d3.svg.arc().innerRadius(radius - 20).outerRadius(radius - 60);
var arcOver = d3.svg.arc().outerRadius(radius - 18).innerRadius(radius - 62);
var pie = d3.layout.pie().sort(null).value(function (d) { return parseInt(d.time); });
var svg = $rootScope.getDonutSVG(".chart-time-spent", width, height);
<div class="col-md-6 col-xs-12 chart-total-users"></div>
推荐答案
我假定您在页面呈现后设置一次图表的大小.
I assume you're setting the size of your chart once when the page gets rendered.
设置静态值时,您需要收听调整大小以使图表具有响应性: https://api.jquery.com/resize/ (也许只在调整大小结束时才重新渲染: jQuery-如何等待调整大小"事件的结束",然后才执行操作?)
When setting static values you need to listen to resize to make your chart responsive: https://api.jquery.com/resize/ (Maybe only rerender when resize ends : jQuery - how to wait for the 'end' of 'resize' event and only then perform an action?)
我不了解花费时间"和您的总用户数"之间的关系
I'm not getting the relation between "chart-time-spent" and your "chart-total-users"
我设置了一个具有Bootstrap和d3以及您的基本变量的小提琴:
I set up a fiddle having Bootstrap and d3 as well as your base variables:
var width = $(".chart-time-spent").width(),
height = 250,
radius = Math.min(width, height) / 2,
legendPosY = (height / 2) - 20;
https://jsfiddle.net/772n9mrn/6/
如果调整大小不能解决您的问题,请尝试在此处进行描述.
If resize does not solve your problem, try to describe it there.
这篇关于在移动视图中时,d3甜甜圈图不完全可见的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!