Как избавиться от больших левого и правого полей в chart.js диаграмме пончика?

Question

Я борюсь с левыми & правые поля на диаграмме пончика, которую я создал, используя Chart.js. Более конкретно, кажется невозможным уменьшить кажущуюся 25% боковую маржу на диаграммах пончиков. Кто-нибудь знает, как я это делаю, или если это возможно? Я просматривал все проблемы и документацию, которые я могу найти, но кажется, что ничего не работает.

Github вопросы я нашел:

• Issue-449
• Issue-1266

В настоящее время это то, что я

Проблема заключается большие наценки на стороны, я не могу g и др им не уйти независимо от того, какие свойства я регулирую

Dimension-накрест Я хотел бы обе диаграммы, чтобы занять до 50% от ширины синего контейнера и 75% его высоты. Я пытаюсь использовать проценты для всего, чтобы он был отзывчивым. Если я использую свойство responsive в конфигурации chart.js, он сохраняет эти боковые поля в такте. В конечном счете, это то, что я пытаюсь сделать грубо (желаемая высота не является точным в этом примере).

Сейчас я генерируя чарты как так

<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, глядя, как этот

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

С применимым CSS для этого HTML ищет например

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. Во всяком случае, существует потенциальное решение для диаграммы js. Вам нужно будет добавить атрибуты width и height. Например:

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

Вот ссылка на JsFiddle с кодом + обновленный width и height атрибуты для первой диаграммы (второй один такой же для сравнения): https://jsfiddle.net/cncdf4od/2/