[英]how to set width of piechart in dc.js through css
I want to set width of piechart of dc.js different for different resolution; 我想为不同的分辨率设置不同的dc.js饼图宽度; for that I want to set width of piechart through css so that I can apply mediaqueries for different resolution.
为此,我想通过css设置饼图的宽度,以便可以将媒体查询应用于不同的分辨率。 Please provide me solution for setting width of piechart of dc.js through css.
请提供我通过CSS设置dc.js饼图宽度的解决方案。
icd9Pie /* dc.pieChart('#gain-loss-chart', 'chartGroup') */
// (_optional_) define chart width, `default = 200`
.width(180) // (optional) define chart height, `default = 200`
.height(160)
// Define pie radius
.radius(80)
// Set dimension
.dimension(icd9Dimension)
// Set group
.group(icd9Group)
// (_optional_) by default pie chart will use `group.key` as
// its label but you can overwrite it with a closure.
.label(function(d) {
return d.key;
}).renderLabel(true)
/
//new code //新代码
icd9Pie /* dc.pieChart('#gain-loss-chart', 'chartGroup') */
// (_optional_) define chart width, `default = 200`
.minWidth(180) // (optional) define chart height, `default = 200`
.minHeight(160)
// Define pie radius
.radius(80)
// Set dimension
.dimension(icd9Dimension)
// Set group
.group(icd9Group)
// (_optional_) by default pie chart will use `group.key` as
// its label but you can overwrite it with a closure.
.label(function(d) {
return d.key;
}).renderLabel(true)
/
I think you may be just running into the minimum sizing parameters there, minWidth
and minHeight
- by default they are 200. 我认为您可能只遇到最小尺寸参数
minWidth
和minHeight
默认情况下为200。
Docs for minWidth and minHeight minWidth和minHeight的文档
The media query didn't work as you specified it above, I had to add braces. 媒体查询无法如您在上面指定的那样工作,我必须添加花括号。 This totally worked for me:
这完全为我工作:
@media (max-width: 1280px) {
#test { width: 180px !important; height: 160px !important; }
}
And set minWidth
and minHeight
in order to allow them to go lower than 200: 并设置
minWidth
和minHeight
,以使其低于200:
chart.minWidth(100)
.minHeight(100)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.