Question

我跟着一个jsfiddle：http://jsfiddle.net/RgLAU/1/

并制作了圆环图。现在，圆环图上的白色实际上是微小的笔划，将甜甜圈的每个部分分开。例如，在下面的图片中，您可以看到（几乎没有）甜甜圈有6个部分，用白色笔划描绘。

我的问题是我想增加这些线条的粗细而不增加整体图表的厚度，这样休息看起来更像这样：

这是我的JS。任何帮助非常感谢。：

var donutVm = this;

donutVm.donutHeight = donutVm.donutHeightConfig || 150;
donutVm.donutWidth = donutVm.donutWidthConfig || 150;
donutVm.donutRadius = donutVm.donutRadiusConfig || 50;

if (CommunityConfig.conversionContestActionId) {
    ActionService.get({ id: CommunityConfig.conversionContestActionId, type: 'action' }).$promise.then(function (response) {
        if (CommunityConfig.conversionContestConversionCountTarget) donutVm.totalConversions = CommunityConfig.conversionContestConversionCountTarget;
        var action = response;
        if (action.linkReference) {
            action.getContextFromLinkReference(action.linkReference, function (error, context) {
                var conversionsMade = context.conversionCount;

                var canvas  = document.getElementById("chart");
                var chart = canvas.getContext("2d");

                function drawDonutChart(canvas)
                {
                    donutVm.x, donutVm.y, donutVm.radius, donutVm.lineWidth, donutVm.strokeStyle, donutVm.from, donutVm.to = null;
                    donutVm.set = function( x, y, radius, from, to, lineWidth, strokeStyle) {
                        donutVm.x = x;
                        donutVm.y = y;
                        donutVm.radius = radius;
                        donutVm.from = from;
                        donutVm.to = to;
                        donutVm.lineWidth = lineWidth;
                        donutVm.strokeStyle = strokeStyle;
                    };

                    donutVm.draw = function(data) {
                        canvas.beginPath();
                        canvas.lineWidth = donutVm.lineWidth;
                        canvas.strokeStyle = donutVm.strokeStyle;
                        canvas.arc(donutVm.x, donutVm.y, donutVm.radius, donutVm.from, donutVm.to);
                        canvas.stroke();
                        var numberOfParts = data.numberOfParts;
                        var parts = data.parts.pt;
                        var colors = data.colors.cs;
                        var df = 1.5 * Math.PI;

                        for(var i = 0; i < numberOfParts; i++) {
                            canvas.beginPath();
                            canvas.strokeStyle = colors[i];
                            canvas.arc(donutVm.x, donutVm.y, donutVm.radius, df, df + (Math.PI * 2) * (parts[i] / 100));
                            canvas.stroke();
                            df += (Math.PI * 2) * (parts[i] / 100);
                        }
                    }
                }

                var sections = {"pt": []};
                var sectionColors = {"cs": []};
                var emptyColor = "lightgrey";
                var madeColor = CommunityConfig.styles.buttonColor;
                var sectionPercentage = 100/donutVm.totalConversions;

                if (conversionsMade == donutVm.totalConversions) {
                    for (var y = 0; y < conversionsMade; y++) {
                        sectionColors.cs.push(emptyColor);
                    }
                } else {
                    for (var y = 0; y < conversionsMade; y++) {
                        sectionColors.cs.push(madeColor);
                    }

                    while (sectionColors.cs.length < donutVm.totalConversions) {
                        sectionColors.cs.push(emptyColor);
                    }
                }

                for (var i = 0; i < donutVm.totalConversions; i++){
                    sections.pt.push(sectionPercentage);
                }

                var data = {
                    numberOfParts: donutVm.totalConversions,
                    parts: sections,
                    colors: sectionColors
                };

                var drawDonut = new drawDonutChart(chart);
                donutVm.set(canvas.width / 2, canvas.height / 2, donutVm.donutRadius, 0, Math.PI*2, 10, "#fff");
                donutVm.draw(data);
                donutVm.donutFinished = true;

Answer 1

一种方法是在绘制截面的弧时使用较小的角度在这个小提琴中，为了产生明显的差距，我将每个部分缩小了1％：http://jsfiddle.net/a7mh9wcv/

canvas.arc(this.x, this.y, this.radius, df, df + (Math.PI * 2) * ((parts[i] - 1) / 100));

另一种方法是将间隙实际绘制为线条：http://jsfiddle.net/jq2nhate/

这必须在绘制部分后完成，这样部分不会覆盖间隙。

Answer 2

一种简单的方法是在所有部件之间添加一个空间，将所有部件减少一小部分。当然，这意味着您必须检查最小百分比才能显示项目的弧。我没有花太多时间来制定完整的解决方案。

你还是要：

添加一些关于最小弧长的检查
在该＆＃34;设置功能＆＃34;

以下是我在您共享的JsFiddle链接中测试的内容（查看使用canvas.arc函数的行：＆＃34; df +（Math.PI * 2）*（（parts [i] - 0.5）/ 100）＆＃34;）：

var canvas  = document.getElementById("chart");
    var chart = canvas.getContext("2d");

    function drawdountChart(canvas)
    {

        this.x , this.y , this.radius , this.lineWidth , this.strockStyle , this.from , this.to = null;
        this.set = function( x, y, radius, from, to, lineWidth, strockStyle)
        {
            this.x = x;
            this.y = y;
            this.radius = radius;
            this.from=from;
            this.to= to;
            this.lineWidth = lineWidth;
            this.strockStyle = strockStyle; 
        }

        this.draw = function(data)
        {
            canvas.beginPath();
            canvas.lineWidth = this.lineWidth;
            canvas.strokeStyle = this.strockStyle;
            canvas.arc(this.x , this.y , this.radius , this.from , this.to);
            canvas.stroke();
            var numberOfParts = data.numberOfParts;
            var parts = data.parts.pt;
            var colors = data.colors.cs;
            var df = 0;
            for(var i = 0; i<numberOfParts; i++)
            {
                canvas.beginPath();
                canvas.strokeStyle = colors[i];
                canvas.arc(this.x, this.y, this.radius, df, df + (Math.PI * 2) * ((parts[i] - 0.5) / 100));
                canvas.stroke();
                df += (Math.PI * 2) * (parts[i] / 100);
            }
        }
    }
    var data = 
        {
            numberOfParts: 4,
            parts:{"pt": [20 , 30 , 25 , 25]},//percentage of each parts 
            colors:{"cs": ["red", "green", "blue", "yellow"]}//color of each part
        };

    var drawDount = new drawdountChart(chart);
    drawDount.set(150, 150, 100, 0, Math.PI*2, 20, "#fff");
    drawDount.draw(data);

我基本上删除了所有部分的百分之一，但保留了＆＃34; df＆＃34;变量完好无损。

Answer 3

这样的事情应该有效：

var donutVm = this;

donutVm.donutHeight = donutVm.donutHeightConfig || 150;
donutVm.donutWidth = donutVm.donutWidthConfig || 150;
donutVm.donutRadius = donutVm.donutRadiusConfig || 50;

if (CommunityConfig.conversionContestActionId) {
    ActionService.get({ id: CommunityConfig.conversionContestActionId, type: 'action' }).$promise.then(function (response) {
        if (CommunityConfig.conversionContestConversionCountTarget) donutVm.totalConversions = CommunityConfig.conversionContestConversionCountTarget;
        var action = response;
        if (action.linkReference) {
            action.getContextFromLinkReference(action.linkReference, function (error, context) {
                var conversionsMade = context.conversionCount;

                var canvas  = document.getElementById("chart");
                var chart = canvas.getContext("2d");

                function drawDonutChart(canvas)
                {
                    donutVm.x, donutVm.y, donutVm.radius, donutVm.lineWidth, donutVm.strokeStyle, donutVm.from, donutVm.to = null;
                    donutVm.set = function( x, y, radius, from, to, lineWidth, strokeStyle) {
                        donutVm.x = x;
                        donutVm.y = y;
                        donutVm.radius = radius;
                        donutVm.from = from;
                        donutVm.to = to;
                        donutVm.lineWidth = lineWidth;
                        donutVm.strokeStyle = strokeStyle;
                    };

                    donutVm.draw = function(data) {
                        canvas.beginPath();
                        canvas.lineWidth = donutVm.lineWidth;
                        canvas.strokeStyle = donutVm.strokeStyle;
                        canvas.arc(donutVm.x, donutVm.y, donutVm.radius, donutVm.from, donutVm.to);
                        canvas.stroke();
                        var numberOfParts = data.numberOfParts;
                        var parts = data.parts.pt;
                        var colors = data.colors.cs;
                        var spacer = 2 * 0.05
                        var df = (1.5 + spacer) * Math.PI;

                        for(var i = 0; i < numberOfParts; i++) {
                            canvas.beginPath();
                            canvas.strokeStyle = colors[i];
                            canvas.arc(donutVm.x, donutVm.y, donutVm.radius, df, df + (Math.PI * 2) * (parts[i] / 100) - (2 * spacer);
                            canvas.stroke();
                            df += (Math.PI * 2) * ((parts[i] / 100) + (2 * spacer));
                        }
                    }
                }

                var sections = {"pt": []};
                var sectionColors = {"cs": []};
                var emptyColor = "lightgrey";
                var madeColor = CommunityConfig.styles.buttonColor;
                var sectionPercentage = 100/donutVm.totalConversions;

                if (conversionsMade == donutVm.totalConversions) {
                    for (var y = 0; y < conversionsMade; y++) {
                        sectionColors.cs.push(emptyColor);
                    }
                } else {
                    for (var y = 0; y < conversionsMade; y++) {
                        sectionColors.cs.push(madeColor);
                    }

                    while (sectionColors.cs.length < donutVm.totalConversions) {
                        sectionColors.cs.push(emptyColor);
                    }
                }

                for (var i = 0; i < donutVm.totalConversions; i++){
                    sections.pt.push(sectionPercentage);
                }

                var data = {
                    numberOfParts: donutVm.totalConversions,
                    parts: sections,
                    colors: sectionColors
                };

                var drawDonut = new drawDonutChart(chart);
                donutVm.set(canvas.width / 2, canvas.height / 2, donutVm.donutRadius, 0, Math.PI*2, 10, "#fff");
                donutVm.draw(data);
                donutVm.donutFinished = true;

html画布 - 在圆环图上放大笔画宽度

3 个答案: