Chartjs線條圖覆蓋面板

Question

我目前使用圖表的圖表，我希望能夠在引導面板中顯示這些圖表。我已經設法得到圖表，但是圖表似乎稍微超過了面板主體。

<div class="panel panel-default" draggable="true"> 
     <div class="panel-heading"> 
      <h3 class="panel-title"> 
       Panel title 
       <span class="glyphicon glyphicon-pencil panel-icons"></span> 
       <span class="glyphicon glyphicon-zoom-in panel-icons"></span> 
       <span class="glyphicon glyphicon-trash panel-icons"></span> 
      </h3> 
     </div> 
     <div class="panel-body"> 
      <canvas id="chartjs"></canvas> 
     </div> 
    </div> 

    var data = { 
    labels: ["January", "February", "March", "April", "May", "June", "July"], 
    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] 
     } 
    ] 
}; 


function loadChart() { 
    var context = $('#chartjs').get(0).getContext("2d"); 
    window.myLine = new Chart(context).Line(data, { 
     responsive: true, 
     legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].strokeColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>" 
    }); 
} 

window.onload = loadChart(); 

這是它目前看起來像 Chart Image.

我是如何在面板的範圍內得到了圖不確定。如果需要更多信息，我會很樂意提供更多信息。

Answer 1

只需將一些padding-right添加到畫布元素。這應該給你足夠的空間，以適應畫板的panel-body。

var data = { 
 
    labels: ["January", "February", "March", "April", "May", "June", "July"], 
 
    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] 
 
    } 
 
    ] 
 
}; 
 

 

 
function loadChart() { 
 
    var context = $('#chartjs').get(0).getContext("2d"); 
 
    window.myLine = new Chart(context).Line(data, { 
 
    responsive: true, 
 
    legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].strokeColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>" 
 
    }); 
 
} 
 

 
window.onload = loadChart();

canvas { 
 
    padding: 0 30px 0 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script> 
 

 
<div class="col-sm-6"> 
 
    <div class="panel panel-default" draggable="true"> 
 
    <div class="panel-heading"> 
 
     <h3 class="panel-title"> 
 
     Panel title 
 
     <span class="glyphicon glyphicon-pencil panel-icons"></span> 
 
     <span class="glyphicon glyphicon-zoom-in panel-icons"></span> 
 
     <span class="glyphicon glyphicon-trash panel-icons"></span> 
 
     </h3> 
 
    </div> 
 
    <div class="panel-body"> 
 
     <canvas id="chartjs"></canvas> 
 
    </div> 
 
    </div> 
 
</div>