javascript - 如何通过CSS在dc.js中设置饼图的宽度

标签 javascript css width media-queries dc.js

我想为不同的分辨率设置不同的dc.js饼图宽度;为此,我想通过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)
        /


//新代码

 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)
        /

最佳答案

我认为您可能只是遇到了最小尺寸参数minWidthminHeight-默认情况下为200。

Docs for minWidth and minHeight

媒体查询无法如您在上面指定的那样工作,我必须添加花括号。这完全为我工作:

@media (max-width: 1280px) {
  #test { width: 180px !important; height: 160px !important; }
}


并将minWidthminHeight设置为低于200:

chart.minWidth(100)
   .minHeight(100)

关于javascript - 如何通过CSS在dc.js中设置饼图的宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33993285/

相关文章:

特定宽度和高度的 Django Form Imagefield 验证

javascript - 放在方括号中的元素为1的数组被视为该元素

javascript - 复选框违反数据验证规则

html - Header 下面的 Div 仍然溢出,为什么?

html - 悬停时从渐变背景过渡到非渐变背景

css - 如何使包装器外部的 div 相对于包装器内的 div 的位置?

javascript - 加载Javascript文件,但是如果花费太长时间则取消?

javascript - 调整jQuery以在Wordpress上工作(syntaxerror)

javascript - 我将如何创建一个JavaScript按钮,以在单击时显示文本

WPF DataGrid 同步列宽