HTML 캔버스 도넛 차트

에 스트로크 폭을 확대하기 나는 jsfiddle 다음 : http://jsfiddle.net/RgLAU/1/HTML 캔버스 도넛 차트

와 도넛 차트를했다. 현재 도넛 형 차트는 도넛 형의 각 부분을 흰색으로 구분하여 매우 작습니다. 예를 들어, 아래 그림에서, 흰색 스트로크로 표시된 도넛 형 부분이 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;

출처

2017-01-26 Kira Pilot

이런 식으로 뭔가 작업을해야합니다 :

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;

출처

2017-01-27 00:04:14

하나의 방법은 섹션의 호를 그릴 때 작은 각을 사용하는 것입니다. 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/

이이어야이 바이올린에
는, I는 표시 간격을 갖기 위해, 각 부분은 1 % 작게 섹션이 그려진 이후에 완료되므로 섹션이 갭을 오버라이드하지 않습니다.

출처

2017-01-26 22:45:00 Giladd

간단한 방법은 모든 부분을 작은 부분으로 줄여서 모든 부분 사이에 공간을 추가하는 것입니다. 물론 이는 항목에 대한 호를 표시하기 위해 최소 백분율을 확인해야 함을 의미합니다. 나는 완전한 해결책을 만드는데 많은 시간을 할애하지 않았다.

당신은 여전히에 있습니다 : 그 "설정 기능"다음

에서 다른 설정 간격 것은 내가 테스트 어떤 것을

만들

는 최소 호 길이에 대한 몇 가지 검사를 추가하려면 당신이 공유 한 JsFiddle 링크 ("df + (Math.PI * 2) * (parts [i] - 0.5)/100)") :

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);

기본적으로 모든 부분의 절반을 제거했지만 "df"변수는 그대로 유지했습니다.

출처

2017-01-26 22:57:39 ChaudPain

답변

관련 문제