C3图表点是空的圆圈

问题描述：

我正在用C3生成折线图。我在http://c3js.org/samples/simple_multiple.html处看到，各个点用与关联线相同的颜色填充。当我创建我的折线图时，我的点只是空的圆圈。我如何获得点填充线颜色？C3图表点是空的圆圈

空圈为点：

C3 graph with non-filled points

C3代：

   c3.generate({ 
        bindto: divReference, 
        data: { 
         x: 'x', 
         columns: columnData, 
         colors: colorData, 
         axes: { data: 'y' }, 
        }, 
        grid: { 
         x: { show: true }, 
         y: { show: true } 
        }, 
        axis: { 
         x: { 
          type: 'timeseries', 
          tick: { format: '%m/%d' } 
         } 
        }, 
        point: { 
         //stroke: '#ff0000' 
         fill: '#ff0000' 
        } 
       })

答

你尝试在顶层设置color.pattern财产（删除所有其他填充你设置的颜色数据）？

c3.generate({ 
... 
    color: { 
    pattern: '#ff0000' 
    } 
})

我相信这个工程的多条线路以及

http://c3js.org/reference.html

color.pattern 设置自定义色彩模式。

color: { pattern: ['#1f77b4', '#aec7e8', '#ff7f0e', '#ffbb78', '#2ca02c', '#98df8a' ] }

顺便说一句，如果这不起作用，请张贴jsfiddle。我们应该能够很快地弄清楚它！

的同事，最终找到了这个问题。我们正在合作的设计公司已经写了CSS，以某种方式覆盖了点的颜色。不过感谢您花时间看看这个问题！ – REW 2014-10-21 17:21:39

答

设置事件 “onrendered” 像这样的，例如：

onrendered: function() { 
      var $$ = this; 
      var circles = $$.getCircles(); 
      for(var i = 0; i < circles.length; i++){ 
       for(var j = 0; j < circles[i].length; j++){ 
       $$.getCircles(j).style("fill", '#FFF') 
        .style("stroke", $$.color) 
        .style("stroke-width", 3); 
       } 
      } 
     }

https://jsfiddle.net/wfn1s41t/

C3图表点是空的圆圈

相关推荐