如何在 dc.js 至 css 中设置饼图的宽度

Question

我想为不同的分辨率设置不同的dc.js饼图宽度；为此，我想通过 css 设置饼图的宽度，以便我可以为不同的分辨率应用媒体查询。请为我提供设置饼图宽度 dc.js 到 css 的解决方案。

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

Answer 1

我认为您可能只是运行那里的最小尺寸参数，minWidth 和 minHeight - 默认情况下它们是 200。

Docs for minWidth and minHeight

媒体查询没有按照您在上面指定的那样工作，我不得不添加大括号。这完全适合我：

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

并设置 minWidth 和 minHeight 以允许它们低于 200：

chart.minWidth(100)
   .minHeight(100)

如何在 dc.js 至 css 中设置饼图的宽度

how to set width of piechart in dc.js through css

javascript

css

width

media-queries

dc.js