防止y轴标签被截断

Question

我的图表 y 标签被截断，通过尝试在 Whosebug 上找到的不同解决方案（例如在标签中添加空格或设置布局填充）没有解决问题。

代码

const optionsTotali = {
  maintainAspectRatio: false,
  responsive: true,
  plugins: {
    legend: {
      display: false
    },
    tooltip: {
      displayColors: false,
      mode: "index",
      intersect: 0,
      callbacks: {
        label: function(context) {
          return "€" + context.parsed.y.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,').replace(/[,.]/g, m => (m === ',' ? '.' : ','));
        }
      }
    },
  },
  scales: {
    y: {
      grid: {
        display: false
      },
      ticks: {
        min: 0,
        beginAtZero: true,
        sampleSize: 1,
        callback: function(value, index, values) {
          return "€" + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
        }
      }
    }
  }
};

const ctx = document.getElementById("chartTotali").getContext('2d');
const chartTotali = new Chart(ctx, {
  type: 'line',
  data: {
    labels: [
      "08:00",
      "09:00",
      "10:00",
      "11:00",
      "12:00",
      "13:00",
      "14:00",
      "15:00",
      "16:00",
      "17:00",
      "18:00",
      "19:00",
      "20:00"
    ],
    datasets: [{
      label: "Totale €",
      fill: true,
      backgroundColor: '#0084ff',
      borderColor: '#0084ff',
      borderWidth: 2,
      pointBackgroundColor: '#0084ff',
      data: [
        "17089.36",
        "394279.52",
        "514863.02",
        "540198.74",
        "379222.06",
        "8793.42",
        "79.58",
        "116379.41",
        "444580.43",
        "506663.36",
        "457947.28",
        "138158.94",
        "398.46"
      ],
    }]
  },
  options: optionsTotali
});

.card-chart {
  overflow: hidden;
}

.card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 0.0625rem solid rgba(34, 42, 66, .05);
  border-radius: 0.2857rem;
}

.card {
  background: #27293d;
  border: 0;
  position: relative;
  width: 100%;
  margin-bottom: 30px;
  box-shadow: 0 1px 20px 0 rgb(0 0 0 / 10%);
}

.card .card-body {
  padding: 15px 15px 15px 15px;
}

.card-body {
  flex: 1 1 auto;
  padding: 1.5rem;
}

.card-chart .chart-area {
  height: 220px;
  width: calc(100% + 30px);
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.0/dist/chart.min.js"></script>
<div class="card card-chart">
  <div class="card-header">
    <div class="row">
      <div class="col-sm-6 text-left">
        <h5 class="card-category">Totale vendite</h5>
        <h2 class="card-title">Totali</h2>
      </div>
    </div>
  </div>
  <div class="card-body">
    <div class="chart-area">
      <canvas id="chartTotali" width="1563" height="220" style="display: block; box-sizing: border-box; height: 220px; width: 1563px;"></canvas>
    </div>
  </div>
</div>

Answer 1

你的 y 轴配置中的 sampleSize 属性是罪魁祸首，因为你把它放在 1 它只看它可以使用的长度的第一个刻度。但是数组中的其他数据要大得多，所以放不下。删除此属性或将其设置为更大的数字以便采样更多的报价将解决您的行为（删除将提供最一致的结果）。

const optionsTotali = {
  maintainAspectRatio: false,
  responsive: true,
  plugins: {
    legend: {
      display: false
    },
    tooltip: {
      displayColors: false,
      mode: "index",
      intersect: 0,
      callbacks: {
        label: function(context) {
          return "€" + context.parsed.y.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,').replace(/[,.]/g, m => (m === ',' ? '.' : ','));
        }
      }
    },
  },
  scales: {
    y: {
      grid: {
        display: false
      },
      ticks: {
        min: 0,
        beginAtZero: true,
        callback: function(value, index, values) {
          return "€" + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
        }
      }
    }
  }
};

const ctx = document.getElementById("chartTotali").getContext('2d');
const chartTotali = new Chart(ctx, {
  type: 'line',
  data: {
    labels: [
      "08:00",
      "09:00",
      "10:00",
      "11:00",
      "12:00",
      "13:00",
      "14:00",
      "15:00",
      "16:00",
      "17:00",
      "18:00",
      "19:00",
      "20:00"
    ],
    datasets: [{
      label: "Totale €",
      fill: true,
      backgroundColor: '#0084ff',
      borderColor: '#0084ff',
      borderWidth: 2,
      pointBackgroundColor: '#0084ff',
      data: [
        "17089.36",
        "394279.52",
        "514863.02",
        "540198.74",
        "379222.06",
        "8793.42",
        "79.58",
        "116379.41",
        "444580.43",
        "506663.36",
        "457947.28",
        "138158.94",
        "398.46"
      ],
    }]
  },
  options: optionsTotali
});

.card-chart {
  overflow: hidden;
}

.card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 0.0625rem solid rgba(34, 42, 66, .05);
  border-radius: 0.2857rem;
}

.card {
  background: #27293d;
  border: 0;
  position: relative;
  width: 100%;
  margin-bottom: 30px;
  box-shadow: 0 1px 20px 0 rgb(0 0 0 / 10%);
}

.card .card-body {
  padding: 15px 15px 15px 15px;
}

.card-body {
  flex: 1 1 auto;
  padding: 1.5rem;
}

.card-chart .chart-area {
  height: 220px;
  width: calc(100% + 30px);
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.0/dist/chart.min.js"></script>
<div class="card card-chart">
  <div class="card-header">
    <div class="row">
      <div class="col-sm-6 text-left">
        <h5 class="card-category">Totale vendite</h5>
        <h2 class="card-title">Totali</h2>
      </div>
    </div>
  </div>
  <div class="card-body">
    <div class="chart-area">
      <canvas id="chartTotali" width="1563" height="220" style="display: block; box-sizing: border-box; height: 220px; width: 1563px;"></canvas>
    </div>
  </div>
</div>

Answer 2

你可以用 sampleSize: x, 属性处理它。您可以删除然后 y-axis 将正确显示。非常感谢@LeeLenalee！

const optionsTotali = {
  maintainAspectRatio: false,
  responsive: true,
  plugins: {
    legend: {
      display: false
    },
    tooltip: {
      displayColors: false,
      mode: "index",
      intersect: 0,
      callbacks: {
        label: function(context) {
          return "€" + context.parsed.y.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,').replace(/[,.]/g, m => (m === ',' ? '.' : ','));
        }
      }
    },
  },
  scales: {
    y: {
      grid: {
        display: false
      },
      ticks: {
        min: 0,
        beginAtZero: true,
        callback: function(value, index, values) {
          return "€" + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
        }
      }
    }
  }
};

const ctx = document.getElementById("chartTotali").getContext('2d');
const chartTotali = new Chart(ctx, {
  type: 'line',
  data: {
    labels: [
      "08:00",
      "09:00",
      "10:00",
      "11:00",
      "12:00",
      "13:00",
      "14:00",
      "15:00",
      "16:00",
      "17:00",
      "18:00",
      "19:00",
      "20:00"
    ],
    datasets: [{
      label: "Totale €",
      fill: true,
      backgroundColor: '#0084ff',
      borderColor: '#0084ff',
      borderWidth: 2,
      pointBackgroundColor: '#0084ff',
      data: [
        "17089.36",
        "394279.52",
        "514863.02",
        "540198.74",
        "379222.06",
        "8793.42",
        "79.58",
        "116379.41",
        "444580.43",
        "506663.36",
        "457947.28",
        "138158.94",
        "398.46"
      ],
    }]
  },
  options: optionsTotali
});

.card-chart {
  overflow: hidden;
}

.card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 0.0625rem solid rgba(34, 42, 66, .05);
  border-radius: 0.2857rem;
}

.card {
  background: #27293d;
  border: 0;
  position: relative;
  width: 100%;
  margin-bottom: 30px;
  box-shadow: 0 1px 20px 0 rgb(0 0 0 / 10%);
}

.card .card-body {
  padding: 15px 15px 15px 15px;
}

.card-body {
  flex: 1 1 auto;
  padding: 1.5rem;
  background: ;
}

.card-chart .chart-area {
  height: 220px;
  width: calc(100% + 30px);
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.0/dist/chart.min.js"></script>
<div class="card card-chart">
  <div class="card-header">
    <div class="row">
      <div class="col-sm-6 text-left">
        <h5 class="card-category">Totale vendite</h5>
        <h2 class="card-title">Totali</h2>
      </div>
    </div>
  </div>
  <div class="card-body">
    <div class="chart-area">
      <canvas id="chartTotali"  style=""></canvas>
    </div>
  </div>
</div>

Answer 3

测试你的代码后，问题似乎出在这部分：

    callback: function(value, index, values) {
      return "€" + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
    }

我的猜测是：由于您在异步回调中更改了标签，chart.js 不知道要应用哪个宽度，而是使用第一个标签的宽度...

您可以通过像这样设置宽度来解决此问题：

  afterFit: function(scaleInstance) {
    scaleInstance.width = 100; // sets the width to 100px
  }

此处来源：How to set fixed width for labels in chartjs

Answer 4

您可以使用 sampleSize 属性

防止y轴标签被截断

Prevent y-axis labels from being cut off

javascript

chart.js