Dlaczego płótno chart.js nie przestrzega dopełnienia elementu kontenera?

Question

Używam wykresu Chart.js z prostym wykresem liniowym, ale właściwości szerokości i wysokości obliczone przez wykres.js wydają się być oparte na całkowitej szerokości i wysokości elementu nadrzędnego, ignorując dopełnienie.

var options = { 
 
    maintainAspectRatio: false, 
 
    responsive: true 
 
}; 
 

 
var data = { 
 
    labels: ["", "", "", "", "", "", ""], 
 
    datasets: [ 
 
     { 
 
      label: "My First dataset", 
 
      fillColor: "rgba(220,220,220,0.2)", 
 
      strokeColor: "rgba(220,220,220,1)", 
 
      pointColor: "rgba(220,220,220,1)", 
 
      pointStrokeColor: "#fff", 
 
      pointHighlightFill: "#fff", 
 
      pointHighlightStroke: "rgba(220,220,220,1)", 
 
      data: [65, 59, 80, 81, 56, 55, 40] 
 
     }, 
 
     { 
 
      label: "My Second dataset", 
 
      fillColor: "rgba(151,187,205,0.2)", 
 
      strokeColor: "rgba(151,187,205,1)", 
 
      pointColor: "rgba(151,187,205,1)", 
 
      pointStrokeColor: "#fff", 
 
      pointHighlightFill: "#fff", 
 
      pointHighlightStroke: "rgba(151,187,205,1)", 
 
      data: [28, 48, 40, 19, 86, 27, 90] 
 
     } 
 
    ] 
 
}; 
 

 
var ctx1 = document.getElementById("mychart1").getContext("2d"); 
 
var myNewChart = new Chart(ctx1).Line(data, options);

.container { 
 
    padding: 15px 15px 15px 15px; 
 
    width: 300px; 
 
    height: 200px; 
 
    border: 1px solid black; 
 
} 
 

 
.child { 
 
    display: inline-block; 
 
    border: 1px solid red; 
 
    width:100%; 
 
    height:100%; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.js"></script> 
 

 

 
<div class='container'> 
 
    <canvas id='mychart1' class='child'></canvas> 
 
</div> 
 
<br> 
 
<div class='container'> 
 
    <div class='child'>test</div> 
 
</div>

JSFiddle

Drugi pojemnik i dziecko pokazuje zachowanie spodziewam. Czy jest to błąd związany z tym, w jaki sposób program Chart.js oblicza szerokość i wysokość płótna lub czy popełniam błąd w stylizacji?

Answer 1

Potrzebowałem również elastyczne płótno i miał ten problem. To był mój dylemat:

<div> 
    <canvas id="chart"></canvas> 
</div> 

Od Chart.js skaluje płótno do szerokości pojemnika, ignorując wyściółkę, po prostu owinięty w płótno div. The div skaluje do kontenera z wyściółką, z poszanowaniem wypełnienia, a następnie responsywny Chart.js canvas skaluje się do div.

Answer 2

W swojej jsfiddle przykład zmienić atrybut responsive false:

var options = { 
    maintainAspectRatio: true, 
    responsive: false 
}; 

Poprzednie ustawienie dodano dodatkową 30px zarówno do wysokości i szerokości podczas inspekcji elementu przy użyciu narzędzi dev Chrome. Ze względu na rozmiar płótna nie powinno to stanowić problemu przy zmianie rozmiaru płótna.

JSFIDDLE EXAMPLE

Answer 3

„Jeśli na przykład chcesz wszystkie wykresy utworzone być czułe i zmienić rozmiar, gdy okno przeglądarki ma następujące ustawienia mogą być zmienione:”

Chart.defaults.global.responsive = true;

„Teraz, za każdym razem tworzymy wykres, opcje. Responsive będzie prawdą. "

Źródło: http://www.chartjs.org/docs/

Answer 4

Lepszym rozwiązaniem jest użycie .container {box-sizing: border-box;}

Answer 5

ja też google dla tego problemu, a zakończył się z prostego rozwiązania.

Dodałem height, aby automatycznie dostosować szerokość i pokazać je w przyjemniejszy sposób. Jeśli naprawdę chcesz, możesz też dodać width. Element canvas jest częścią HTML5.

Nie pozwala na wprowadzanie wartości za pomocą px. Zignoruj ​​to i po prostu wpisz wartość numeryczną, której potrzebujesz.

<canvas id="myChart" height="80"></canvas> 

Answer 6

Zapakowałem, a następnie użyłem tego CSS.

.chart-container { 
    box-sizing:border-box; 
    margin:2%; 
    width:96%; 
} 

Utrzymuje to wyściełane od krawędzi i reaguje. Użyłem 2%, ale możesz użyć procentów, które odpowiadają twojemu układowi.