如何使用 chart.js 僅繪制圖形和 Xaxis 網格線

Question

我正在嘗試繪制圖形，但左角和下角不斷出現此空白邊距。 我該如何擺脫它？ 我設法擦除了它們，但同時它也擦除了 X 軸的網格線。 我想保留 Xaxis 網格線。

請注意，我還希望圖形周圍有邊框。 沒有找到使用 chart.js 繪制邊框的方法。

白色空間非常明顯，在底部和左側，將灰色邊框隔開。 您可以在圖像上看到它：

我嘗試禁用刻度顯示。

到目前為止我的圖表：

var myChart = new Chart(modalChart, {
          type: 'bar',

          data: {
              labels: ['Total enviado', 'Total recebido', 'total aberto', 'total convertido'],
              datasets: [{
                  backgroundColor: my_gradient,
                  data: [totalEnviado,totalRecebido, totalAberto,totalConvertido]
              }]
          },
          options: {
              legendCallback: function(chart){
                  var text = [];
                  text.push('<div class = "modal-graph-container">');
                  text.push('<div class = "modal-graph-inner">');
                  for (var i=0; i<chart.data.labels.length; i++) {
                      console.log(chart.data.datasets[i]); // see what's inside the obj.
                      text.push('<div class = "modal-graph-child">');
                      text.push('<span style="">' + chart.data.labels[i] + '</span>');
                      console.log(chart.data.labels[i]);
                      text.push('</div>');
                  }
                  text.push('</div>');
                  text.push('</div>');
                  return text.join("");
              },
             legend: {
                  display:false
              },
              scales: {
                  xAxes:[{
                      display: true,
                      categoryPercentage:1.0,
                      barPercentage:1.0,
                      ticks: {
                          beginAtZero: true,
                          display:false
                      }
                  }],
                  yAxes: [{
                      ticks: {
                          beginAtZero:true,
                          display: false
                      },
                      gridLines:{
                        display:false
                      }
                  }]
              }
          }
      });

請注意，我還希望圖形周圍有邊框。 沒有找到僅使用 chart.js 繪制邊框的方法。 圖形周圍的灰色邊框和分隔條的灰色邊框非常重要。

Answer 1

您需要將 x 軸和 y 軸的drawTicks選項設置為false ：

gridLines: {
  drawTicks: false
}

工作示例：

 var modalChart = document.getElementById("chart"), totalEnviado = 4, totalRecebido = 3, totalAberto = 2, totalConvertido = 1, my_gradient = "orange"; // -- var myChart = new Chart(modalChart, { type: 'bar', data: { labels: ['Total enviado', 'Total recebido', 'total aberto', 'total convertido'], datasets: [{ backgroundColor: my_gradient, data: [totalEnviado, totalRecebido, totalAberto, totalConvertido] }] }, options: { legendCallback: function(chart) { var text = []; text.push('<div class = "modal-graph-container">'); text.push('<div class = "modal-graph-inner">'); for (var i = 0; i < chart.data.labels.length; i++) { console.log(chart.data.datasets[i]); // see what's inside the obj. text.push('<div class = "modal-graph-child">'); text.push('<span style="">' + chart.data.labels[i] + '</span>'); console.log(chart.data.labels[i]); text.push('</div>'); } text.push('</div>'); text.push('</div>'); return text.join(""); }, legend: { display: false }, scales: { xAxes: [{ display: true, categoryPercentage: 1.0, barPercentage: 1.0, ticks: { beginAtZero: true, display: false }, gridLines: { drawTicks: false } }], yAxes: [{ ticks: { beginAtZero: true, display: false }, gridLines: { display: false, drawTicks: false } }] } } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script> <div style="border:1px solid #000"> <canvas id="chart"></canvas> </div>