chart.jsドーナツチャートで大きな左右の余白を取り除くにはどうすればいいですか？

Question

Chart.jsを使用して作成したドーナツチャートの右余白は&です。具体的には、ドーナツチャートの25％のサイドマージンを減らすことは不可能です。私はこれをどのように達成するか、それが可能なのか誰にも分かりますか？私は見つけることができるすべてのgithub問題とドキュメントを見てきましたが、何も動作していないようです。

Githubの問題私が見つけた：

• Issue-449
• Issue-1266は現在、これは私が

  

  問題は上の大きなマージンで持っているものです両側、私はgすることはできませんら、それらは私が

  

  ディメンションワイズ私は青色のコンテナの幅の50％とその高さの75％を取るために、両方のチャートのようにしたい調整どのような性質に関係なく、離れて行くありません。私はすべてにパーセンテージを使用しようとしていますので、それは反応的です。 chart.jsの設定でresponsiveプロパティを使用すると、それらのサイドマージンが維持されます。最終的に、これは私が大雑把にやろうとしていることです（この例では希望する高さは正確ではありません）。今、私は、HTMLの部分は、そのHTMLに適用できるCSSが探していると、この

  <div class="col left"> 
      <div class="section side-sm" style="background-color:blue;"> 
      </div> 
      <div class="section side-sm" style="background-color:black;"> 
      </div> 
      <div class="section side-lg"> 
       <div class="accountContainer" style="height:75%;overflow:hidden;"> 
        <canvas id="myDoughnutChart" style="background-color:white;"></canvas> 
       </div> 
       <div class="expenseContainer" style="height:75%;overflow:hidden;"> 
        <canvas id="myDoughnutChart2" style="background-color:white;"></canvas> 
       </div> 
      </div> 
  </div> 
  

  のように見えるではそう

  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.0/Chart.bundle.min.js"></script> 
  <script> 
  window.onload = function() { 
  
  Chart.pluginService.register({ 
       afterUpdate: function (chart) { 
        if (chart.config.options.elements.center) { 
         var helpers = Chart.helpers; 
         var centerConfig = chart.config.options.elements.center; 
         var globalConfig = Chart.defaults.global; 
         var ctx = chart.chart.ctx; 
  
         var fontStyle = helpers.getValueOrDefault(centerConfig.fontStyle, globalConfig.defaultFontStyle); 
         var fontFamily = helpers.getValueOrDefault(centerConfig.fontFamily, globalConfig.defaultFontFamily); 
  
         if (centerConfig.fontSize) 
          var fontSize = centerConfig.fontSize; 
         // figure out the best font size, if one is not specified 
         else { 
          ctx.save(); 
          var fontSize = helpers.getValueOrDefault(centerConfig.minFontSize, 1); 
          var maxFontSize = helpers.getValueOrDefault(centerConfig.maxFontSize, 256); 
          var maxText = helpers.getValueOrDefault(centerConfig.maxText, centerConfig.text); 
  
          do { 
           ctx.font = helpers.fontString(fontSize, fontStyle, fontFamily); 
           var textWidth = ctx.measureText(maxText).width; 
  
           // check if it fits, is within configured limits and that we are not simply toggling back and forth 
           if (textWidth < chart.innerRadius * 2 && fontSize < maxFontSize) 
            fontSize += 1; 
           else { 
            // reverse last step 
            fontSize -= 1; 
            break; 
           } 
          } while (true) 
          ctx.restore(); 
         } 
  
         // save properties 
         chart.center = { 
          font: helpers.fontString(fontSize, fontStyle, fontFamily), 
          fillStyle: helpers.getValueOrDefault(centerConfig.fontColor, globalConfig.defaultFontColor) 
         }; 
        } 
       }, 
       afterDraw: function (chart) { 
        if (chart.center) { 
         var centerConfig = chart.config.options.elements.center; 
         var ctx = chart.chart.ctx; 
  
         ctx.save(); 
         ctx.font = chart.center.font; 
         ctx.fillStyle = chart.center.fillStyle; 
         ctx.textAlign = 'center'; 
         ctx.textBaseline = 'middle'; 
         var centerX = (chart.chartArea.left + chart.chartArea.right)/2; 
         var centerY = (chart.chartArea.top + chart.chartArea.bottom)/2; 
         ctx.fillText(centerConfig.text, centerX, centerY); 
         ctx.restore(); 
        } 
       }, 
  }) 
  
       var config = { 
        type: 'doughnut', 
        data: { 
         labels: [ 
          "Savings", 
          "Checking" 
         ], 
         datasets: [{ 
          data: [300, 50], 
          backgroundColor: [ 
           "#FF6384", 
           "#36A2EB" 
          ], 
          hoverBackgroundColor: [ 
           "#FF6384", 
           "#36A2EB" 
          ] 
         }] 
        }, 
        options: { 
         responsive:false, 
         maintainAspectRatio:false, 
         title: { 
          fullWidth: false, 
          display: true, 
          text: 'Current Balance' 
         }, 
         legend: { 
          position:'bottom', 
          labels: { 
           boxWidth:15 
          } 
         }, 
         elements: { 
          center: { 
           // the longest text that could appear in the center 
           maxText: '$000000', 
           text: '$40,000', 
           fontColor: 'black', 
           fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif", 
           fontStyle: 'normal', 
           minFontSize: 1, 
           maxFontSize: 256, 
          } 
         } 
        } 
       }; 
  
  
       var ctx = document.getElementById("myDoughnutChart").getContext("2d"); 
       var myDoughnutChart = new Chart(ctx, config); 
  
       var ctx2 = document.getElementById("myDoughnutChart2").getContext("2d"); 
       var myDoughnutChart2 = new Chart(ctx2, config); 
  }; 
  </script> 
  
  </head> 
  

  のようなグラフを生成しています

  

  このように

  html, body { 
      margin: 0; 
      height: 100%; 
      font-family: 'Roboto', sans-serif; 
  } 
  /* Start: Column-Specific */ 
  .col { 
      height:100%; 
      float:left; 
  } 
  
  .left, .right { 
      width:25%; 
      height:97%; 
      background-color:white; 
  } 
  /*Start: Section-Specific */ 
  .section { 
      width:100%; 
      clear: both; 
      margin:auto; 
      border-radius: 10px; 
      display:table; 
  } 
  
  .col.left>.section, .col.right>.section { 
      width:97%; 
  } 
  .side-lg { 
      height:40%; 
      background-color:blue; 
      margin-top:1%; 
  } 
  

  誰も私がそれらの大きなマージンを取り除き、私が描写した/見せている外観を達成する方法を理解するのを助けることができますか？出来ますか？

Answer 1

あなたの質問が間違っていました。私はあなたにはGoogleのグラフが必要だと思いました。とにかく、チャートの潜在的な解決策があります。 widthとheight属性を追加する必要があります。例：ここでは

<canvas id="myDoughnutChart" width="250%" height="310%"></canvas> 

はあなたのコード+最初のチャートの更新widthとheight属性（第2 1は、比較のために同じである）とのJsFiddleへのリンクです： https://jsfiddle.net/cncdf4od/2/