javascript - 如何使用 chart.js 仅绘制图形和 X 轴网格线

Question

我正在尝试绘制图形，但左 Angular 和底 Angular 一直有空白边距。我该如何摆脱它？我设法删除它们，但同时它删除了 X 轴的网格线。我想保留 X 轴网格线。

请注意，我还想要图形周围的边框。没有找到使用 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>