Question

我正在尝试绘制图形，但是左下角和下角一直保持空白。我该如何摆脱呢？我设法擦除它们，但同时它擦除了X轴的gridLines。我想保留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轴，您都需要将create table schedulewidgetfix as (select * from PRSNLOCPROFMM where PERSONALLOCATNPROFID in (select PERSONALLOCATNPROFID from PERSONALLOCATNPROF where PERSONALLOCATNPROFID not in (select PERSONALLOCATNPROFID from PRSNLOCPROFORGMM)))选项设置为SELECT * INTO schedulewidgetfix FROM (select * from PRSNLOCPROFMM where PERSONALLOCATNPROFID in (select PERSONALLOCATNPROFID from PERSONALLOCATNPROF where PERSONALLOCATNPROFID not in (select PERSONALLOCATNPROFID from PRSNLOCPROFORGMM)))：

drawTicks

工作示例：

false

gridLines: {
  drawTicks: false
}

如何仅使用chart.js绘制图形和Xaxis网格线

1 个答案: