Question

您好我正在使用c3js圆环图。一切都好。我面临的唯一问题是起点＆amp;＆amp;方向。我试图改变图表的角度，但它不起作用。我想要的是以时钟方向开始在圆形顶部绘制图表。

这是我正在使用的代码。

_chartdata = c3.generate({
        bindto: '#handler',
        data: {
            columns: [],
            type: 'donut',
            colors: colors,
        },
        donut: {
            title: "0%",
            label: {
                show: false
            },
            width: 20,
        },
        startAngle: -90,
    });

我试图通过添加起始角度来改变角度和方向，但它不起作用：有没有办法改变角度？

这就是我想要的。

这就是我现在得到的

Answer 1

您可以在onrendered函数中调整甜甜圈来执行此操作。它有点复杂，因为文本元素需要恢复正常（你不希望它们从前到后并且有一定角度），并且需要适应现有的变换。

更改角度变量以获得新的起始角度和方向（1或-1）

onrendered: function () {
    var angle = 180;
    var direction = -1;

    d3.select("#handler").selectAll(".c3-chart-arcs").each (function (d, i) {
        var d3elem = d3.select(this);
        var current = d3elem.attr("transform");
        var currentTrans = d3.transform(current);
        currentTrans.rotate = angle;
        currentTrans.scale[0] = direction;
        d3elem.attr("transform", currentTrans.toString());   // flips n rotates

        d3elem.selectAll("text").each (function () {
            var d3elem = d3.select(this);
            var current2 = d3elem.attr("transform");
            var currentTrans2 = d3.transform(current2);
                currentTrans2.rotate = angle;
                currentTrans2.scale[0] = direction;
                d3elem.attr("transform", currentTrans2.toString());  
        });
    })
}

PS这会调整工具提示，它通过测量未缩放和扭曲的元素来获取x和y：

tooltip: {
    position: function (data, width, height, element) {
        var m = d3.mouse(d3.select("#handler .c3-event-rects").node());
      var top = m[1] + 15;
      var left = m[0];
      return {top: top, left: left};
  }
},

编辑3：

圆角更加复杂。基本上d3允许你在弧上设置cornerRadius，但是c3不会公开它。唯一的方法（AFAIK）是在设置图表之前替换c3中的两个圆弧绘制函数，除了添加一个角半径值（我设置了

）之外还有两个完全相同的函数

c3.chart.internal.fn.getSvgArc = function () {
    var $$ = this,
        arc = $$.d3.svg.arc().outerRadius($$.radius).innerRadius($$.innerRadius).cornerRadius(($$.radius - $$.innerRadius) / 2),
        newArc = function newArc(d, withoutUpdate) {
        var updated;
        if (withoutUpdate) {
            return arc(d);
        } // for interpolate
        updated = $$.updateAngle(d);
        return updated ? arc(updated) : "M 0 0";
    };
    // TODO: extends all function
    newArc.centroid = arc.centroid;
    return newArc;
};

c3.chart.internal.fn.getSvgArcExpanded = function (rate) {
    var $$ = this,
        arc = $$.d3.svg.arc().outerRadius($$.radiusExpanded * (rate ? rate : 1)).innerRadius($$.innerRadius).cornerRadius(($$.radius - $$.innerRadius) / 2);
    return function (d) {
        var updated = $$.updateAngle(d);
        return updated ? arc(updated) : "M 0 0";
    };
};

你可能在这一点上考虑海狸关于一个没有这么多黑客攻击的图表:-)（如果highcharts做圆角的话）

https://jsfiddle.net/np494kb6/6/

在c3圆环图中设置起点

1 个答案: