Chart.js填充不适用于ScaleLabel

Question

在这个jsfiddle https://jsfiddle.net/rvbrr0Lu/30/上。 ＆＃39;＆＃39;用于x轴的ScaleLabel中的char被截断。我尝试在ScaleLabel中添加一些填充，但它似乎没有效果。我应该怎么做才能做到＆＃39;＆＃39;在x轴上没有切断？

这是我的js代码。

var canvas = document.getElementById('myChart');
var raw = [
  {start: '0', end: '10', data: [{}]},
  {start: '10', end: '20', data: [{},{},{}]},
  {start: '20', end: '30', data: [{},{}]},
  {start: '30', end: '40', data: [{},{},{},{}]},
  {start: '40', end: '50', data: [{},{},{},{},{}]},
  {start: '50', end: '60', data: [{},{},{},{},{},{}]},
];
var data = {
    labels: raw.map((r) => '$' + r.start).concat('$' + raw[raw.length - 1].end),
    datasets: [
        {
            backgroundColor: ["red","orange","yellowgreen","green","violet", "rebeccapurple"],
            data: raw.map((r) => r.data.length*(1.73 * Math.random())),
        }
    ]
};
function getYTicks() { return [0, 10]};
function formatz(v) { return 'E' + v; };
function formatY(v) { return '$' + v + '.00'; };
var option = {
  legend: {
        display: false,
      },
      layout: {
        padding: {
          left: 5,
          top: 5,
          right: 5,
          bottom: 5,
        },
      },
    scales: {
    yAxes:[{
        scaleLabel: {
            display: true,
            labelString: 'Y',
            fontFamily: 'Lato',
            fontSize: 14,
          },
          ticks: {
            beginAtZero: true,
            padding: 10,
            fontFamily: 'Lato',
            fontSize: 14,
          },
          afterBuildTicks: getYTicks(),
          gridLines: {
            display: true,
            color: 'rgba(50,50,50,0.2)',
            zeroLineColor: 'rgba(50,50,50,0.5)',
            zeroLineWidth: 2,
            drawTicks: true,
            tickMarkLength: 4,
          },
    }],
    xAxes:[{
      barPercentage: 0.8,
      categoryPercentage: 1,
      gridLines: {
            display: false,
            tickMarkLength: 10,
            color: 'rgba(50,50,50,0.1)',
            drawTicks: false,
            offsetGridLines: false,
            zeroLineColor: 'rgba(50,50,250,0.5)',
            zeroLineWidth: 5,
      },
      scaleLabel: {
            display: true,
            labelString: 'Pages',
             padding: 300,
            fontFamily: 'Lato',
            fontSize: 14,
          },
      ticks: {
            beginAtZero: true,
            callback: formatz,
            fontFamily: 'Lato',
            fontSize: 14,
          },
    }]
  }
};

var myBarChart = Chart.Bar(canvas,{
    data:data,
  options:option
});

Answer 1

使用最新版本的Chart.js（2.7.1）：

＆＃13;

＆＃13;

var canvas = document.getElementById('myChart');
var raw = [
  {start: '0', end: '10', data: [{}]},
  {start: '10', end: '20', data: [{},{},{}]},
  {start: '20', end: '30', data: [{},{}]},
  {start: '30', end: '40', data: [{},{},{},{}]},
  {start: '40', end: '50', data: [{},{},{},{},{}]},
  {start: '50', end: '60', data: [{},{},{},{},{},{}]},
];
var data = {
    labels: raw.map((r) => '$' + r.start).concat('$' + raw[raw.length - 1].end),
    datasets: [
        {
            backgroundColor: ["red","orange","yellowgreen","green","violet", "rebeccapurple"],
            data: raw.map((r) => r.data.length*(1.73 * Math.random())),
        }
    ]
};
function getYTicks() { return [0, 10]};
function formatz(v) { return 'E' + v; };
function formatY(v) { return '$' + v + '.00'; };
var option = {
  legend: {
        display: false,
      },
      layout: {
        padding: {
          left: 10,
          top: 10,
          right: 10,
          bottom: 10,
        },
      },
	scales: {
  	yAxes:[{
        scaleLabel: {
            display: true,
            labelString: 'Y',
            fontFamily: 'Lato',
            fontSize: 14,
          },
          ticks: {
            beginAtZero: true,
            padding: 10,
            fontFamily: 'Lato',
            fontSize: 14,
          },
          afterBuildTicks: getYTicks(),
          gridLines: {
            display: true,
            color: 'rgba(50,50,50,0.2)',
            zeroLineColor: 'rgba(50,50,50,0.5)',
            zeroLineWidth: 2,
            drawTicks: true,
            tickMarkLength: 4,
          },
    }],
    xAxes:[{
      barPercentage: 0.8,
      categoryPercentage: 1,
      gridLines: {
            display: false,
            tickMarkLength: 10,
            color: 'rgba(50,50,50,0.1)',
            drawTicks: false,
            offsetGridLines: false,
            zeroLineColor: 'rgba(50,50,250,0.5)',
            zeroLineWidth: 5,
      },
      scaleLabel: {
            display: true,
            labelString: 'Pages',
            padding: 20,
            fontFamily: 'Lato',
            fontSize: 14,
          },
      ticks: {
            beginAtZero: true,
            callback: formatz,
            fontFamily: 'Lato',
            fontSize: 14,
          },
    }]
  }
};

var myBarChart = Chart.Bar(canvas,{
	data:data,
  options:option
});

＆＃13;

#myChart {
   border: 1px solid black;
}

＆＃13;

<script src="https://unpkg.com/moment@2.14.1/min/moment.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.js"></script>

<canvas id="myChart" width="400" height="300"></canvas>

＆＃13;

＆＃13;

＆＃13;