javascript - Chartjs 折线图覆盖面板

Question

我目前正在使用图表js来绘制图表，我希望能够在 Bootstrap 面板中显示这些图表。我已经成功地绘制了图表，但是图表似乎有点超出了面板主体。

<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

只需向 Canvas 元素添加一些 padding-right 即可。这应该会给你足够的空间来将 Canvas 放入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>