5

我一直在尝试使 x 轴网格线位于 c3js 条形图内容的后面。

我玩弄了不起作用的 z-index。我尝试了不透明度，但也没有用。

这是我正在使用的代码的 JSFiddle。

https://jsfiddle.net/chaitanya81/rvhb0fy4/1/

var chart = c3.generate({
        bindto: '#chart',
        data: {
            x : 'x',
            columns: [
                ['x', 'M','T','W','TH','F','SA','SU'],
                ['revenue', 200, 300, 200, 400, 500, 700, 600.56]
            ],
            type: 'bar'
        },
        color: {
            pattern: ["#ff9900"]
        },
        axis: {
            x: {
                type: 'category', // this needed to load string x value
                tick: {
                    outer: false
                }
            },
            y: {
                tick: {
                    outer: false
                }
            }
        },
        grid: {
            x: {
                lines: [
                    {value: "M"},
                    {value: "T"},
                    {value: "W"},
                    {value: "TH"},
                    {value: "F"},
                    {value: "SA"},
                    {value: "SU"}
                ]
            }
        },
        bar: {
            width: {
                ratio: 0.4
            }
        },
        legend: {
            hide: true
        },
        tooltip: {
            contents: function (data, 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;

                        for (i = 0; i < data.length; i++) {
                            if (! (data[i] && (data[i].value || data[i].value === 0))) { continue; }

                            if (! text) {
                              title = titleFormat ? titleFormat(data[i].x) : data[i].x;
                              text = "<div id='tooltip' class='d3-tip'>";
                            }
                            value = valueFormat(data[i].value, data[i].ratio, data[i].id, data[i].index);
                            text += "<span class='value'>$" + value + "</span>";
                            text += "</div>";
                        }

                    return text;
            }
        },
        transition: {
            duration: 1000
        }
});

有人用 c3js 图表试过这个吗？

提前致谢。

4

2 回答 2

10

您可以将 grid.lines.front 设置为 false

var chart = c3.generate({
    bindto: '#chart',
    data: {
      ...
    },
    grid: {
      lines: {
        front: false
      }
    }
  });

https://jsfiddle.net/Yosephsol/bwu70xgq/

于 2016-07-13T06:59:38.323 回答
1

网格线层位于图表元素（条形）层之上，而 SVG 的 z-index 由文档中元素的顺序设置。

您可以使用您的区域来产生相同的效果。一种方法是

CSS

.border {
    stroke: #000;
    fill: transparent;
}

.whiteborder {
    stroke: white;
    fill: transparent;
}

脚本

regions: [
        { axis: 'x', start: -0.5, end: 0, class: 'border' },
        { axis: 'x', start: -0.5, end: 1, class: 'border' },
        { axis: 'x', start: -0.5, end: 2, class: 'border' },
        { axis: 'x', start: -0.5, end: 3, class: 'border' },
        { axis: 'x', start: -0.5, end: 4, class: 'border' },
        { axis: 'x', start: -0.5, end: 5, class: 'border' },
        { axis: 'x', start: -0.5, end: 6, class: 'border' },
        { axis: 'x', start: -0.5, end: 6.5, class: 'whiteborder' },
],

最后一行是去掉顶部边框（您不能以不同的方式设置矩形的不同边框 - 有一个使用 stroke-dasharray 的替代 [hack]，但这取决于您所在区域的相对高度和宽度）

小提琴 - https://jsfiddle.net/d611yq7x/

于 2015-07-11T14:41:49.510 回答