chart.js - 当图表 js Linechart 中只有一个标签时如何绘制和管理线条

问题描述

我正在使用 Chart.JS v 2.9.3 创建折线图

折线图显示所选产品的每月总费用

例如，如果用户选择 XYZ 产品，则此图表将显示每月费用 [Jan-2021-Dec-2021] 如果相应的产品费用仅显示 2021 年 1 月，那么它会在 y 轴上显示月份

---

这里是jsfiddle example

---

1. 添加我已经尝试过的偏移技巧 xAxes : [{ offset:true }],

var config = {
  type: 'line',data: {
    labels: ["jan-2021"],datasets: [{
      label: "month-year",data: [65],backgroundColor: "rgb(118,101,228)",}],},scales : {
      xAxes : [{
         offset:true
      }],};

var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx,config);

<div class="myChart">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>

<canvas id="myChart"></canvas>
          </div>

请参考上图以了解我要存档的内容，我不关心图表上的点

如您所见，这些点粘在 y 轴上。当图表中只有一个数据时，是否可以将折线图居中？

解决方法

您可以使用对齐选项：

var mybarChart = new Chart(ctx,{
  type: 'bar',responsive: true,data: data,options: {
    legend: {
      display: false,position: 'bottom',align: 'center'
    },var config = {
  type: 'line',data: {
    labels: ["","January-2021",""],datasets: [{
      label: "month-year",data: [0,134335066,0],backgroundColor: "rgb(118,101,228)",}],options: {
        legend: {
          display: false,align: 'center'
        },},scales: {},};

参考this

,

Chart.js 不支持这种用例，因为它提供了扭曲的图表图像，因为点和标签不再对齐。如果你真的想要这个，你可以预先检查你的代码是否只有 1 个数据点。如果是这种情况，请在前面和后面的标签数组中添加一个空字符串，并在数据数组后面的前面添加零（或将略低的值作为单个数据点，以便比例不会出现大步长) 像这样：

var config = {
  type: 'line',};

var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx,config);

<div class="myChart">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.js"></script>

  <canvas id="myChart"></canvas>
</div>