Question

我的c3库有问题。实际上，我必须在表格单元格中生成许多圆环图。图表生成良好但背景未填充，只有第一张图表具有良好的背景填充...

这是我的生成代码：

var chartTitle1dy = 0;
  var chart = c3.generate({
    bindto: "#" + prefix + "_chart_" + scopeId + "_" + chartSiteId,
    size: {
      height: 75
    },
    data: {
      columns: [
        ['show', value],
        ['dontshow', dontShow]
      ],
      type: 'donut',
      order: null
    },
    color: {
      pattern: ['green', 'white']
    },
    legend: {
      show: false
    },
    donut: {
      label: {
        show: false
      },
      width: 5,
      expand: false
    },
    tooltip: {
      show: true,
      contents: function (d, defaultTitleFormat, defaultValueFormat, color) {
        var $$ = this, config = $$.config,
          titleFormat = config.tooltip_format_title || defaultTitleFormat,
          nameFormat = config.tooltip_format_name || function (name) { return name; },
          valueFormat = config.tooltip_format_value || defaultValueFormat,
          text, i, title, value, name, bgcolor;
        for (i = 0; i < d.length; i++) {
          if (! (d[i] && (d[i].value || d[i].value === 0))) { continue; }

          if (! text) {
            title = titleFormat ? titleFormat(d[i].x) : d[i].x;
            text = "<table class='"
              + $$.CLASS.tooltip + "'>"
              + (title || title === 0 ? "<tr><th colspan='2' style='text-align: center;'>"
              + title
              + "</th></tr>" : "");
          }

          name = nameFormat(d[i].name);
          value = valueFormat(d[i].value, d[i].ratio, d[i].id, d[i].index);
          bgcolor = $$.levelColor ? $$.levelColor(d[i].value) : color(d[i].id);

          text += "<tr class='" + $$.CLASS.tooltipName + "-" + d[i].id + "'>";
          text += "<td class='value' colspan='2' style='text-align: center;'>" + value + "</td>";
          text += "</tr>";
        }
        return text + "</table>";
      },
      format: {
        title: function() {return 'Details'},
        value: function() {
          return numerator + ' / ' + denominator;
        }
      }
    }
  });
// overide the chart title
  var label = d3.select('#myDifferentIdForEachChart text.c3-chart-arcs-title');
  label.html(''); // remove existant text
  label.insert('tspan')
    .text(Number(value) + "%")
    .attr('fill', '#000')
    .attr('dy', chartTitle1dy)
    .attr('x', 0)
    .attr('y', 0)
    .attr("style", "font-size: 0.7em");

  // grey background to fill center of donut
    d3.select("td .c3 .c3-chart")
      .insert("circle", ":first-child")
      .attr("cx", chart.internal.width / 2)
      .attr("cy", chart.internal.height / 2 - chart.internal.margin.top)
      .attr("r", chart.internal.innerRadius)
      .attr("fill", "#d3d3d3")
    ;

结果出现了我的故障，每个带有“％”的值都是图表，但是用白色而不是浅灰色填充。

你能帮我解决一下吗？

先谢谢，

Answer 1

一个可能的解决方案是改变这个：

d3.select("td .c3 .c3-chart")

d3.select仅选择匹配的第一个元素（来自https://github.com/d3/d3-selection）：

[d3.select]选择与指定选择器字符串匹配的第一个元素。如果没有元素与选择器匹配，则返回空选择。如果多个元素与选择器匹配，则仅选择第一个匹配元素（按文档顺序）。

如果您使用

d3.selectAll("td .c3 .c3-chart").attr("fill", "#d3d3d3")...

您应该能够一次设置所有图表的背景颜色。

更改c3圆环图上的背景填充

1 个答案: