ChartJS yAxis 显示不一致的数据

Question

我正在尝试在条形图中显示来自我的 API 的一些数据，其中包含最新的 ChartJS。

初始化我的图表后，我有一个函数可以从 API 获取数据并将其设置在图表中。

问题是 yAxis 显示的数据不一致，例如图表中的数据具有 9000, 1050.. 之类的值，而轴仅显示 0 1 2 3...

举个例子：

const optionsPagamentiBar = {
  responsive: true,
  maintainAspectRatio: false,
  plugins: {
    legend: {
      display: false
    },
    tooltip: {
      mode: "index",
      intersect: 0,
      usePointStyle: true,
      callbacks: {
        label: function(context) {
          return context.dataset.label + ": " + "€" + context.dataset.data.replace(/\d(?=(\d{3})+\.)/g, '$&,').replace(/[,.]/g, m => (m === ',' ? '.' : ','));
        }
      }
    }
  },
  scales: {
    y: {
      ticks: {
        display: true,
        beginAtZero: true,
        fontSize: 10,
        stepSize: 1,
        callback: function(value, index, values) {
          return "€" + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
        }
      },
      grid: {
        drawBorder: false,
        zeroLineColor: "transparent",
      }
    },
    x: {
      display: 1,
      ticks: {
        padding: 10,
        display: true,
        fontSize: 10
      },
      grid: {
        display: false
      }
    }
  }
}

const chartBarPayments = new Chart(document.getElementById("chartBarPayments").getContext('2d'), {
  type: 'bar',
  data: {
    labels: [],
    datasets: [{
      data: [],
    }]
  },
  options: optionsPagamentiBar
});
// this data is get from API
const data = {
  "labels": [
    "08:48",
    "08:53",
    "08:55",
    "09:20",
    "09:36",
    "10:18",
    "11:50"
  ],
  "datasets": [{
      "label": "Visa+bancom",
      "data": "9395.45",
      "backgroundColor": "rgb(255, 64, 64)"
    },
    {
      "label": "CONTANTI",
      "data": "6566.54",
      "backgroundColor": "rgb(224, 7, 152)"
    },
    {
      "label": "Arrot. l96/17",
      "data": "-0.05",
      "backgroundColor": "rgb(145, 10, 228)"
    },
    {
      "label": "gift",
      "data": "19.32",
      "backgroundColor": "rgb(57, 70, 255)"
    },
    {
      "label": "RESI",
      "data": "130.83",
      "backgroundColor": "rgb(5, 160, 218)"
    },
    {
      "label": "L.96/17",
      "data": "-0.01",
      "backgroundColor": "rgb(13, 233, 137)"
    },
    {
      "label": "SATISPAY",
      "data": "55.53",
      "backgroundColor": "rgb(77, 254, 51)"
    }
  ]
}


chartBarPayments.data = data;
chartBarPayments.update();

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.0/dist/chart.min.js"></script>

<canvas id="chartBarPayments"></canvas>

Answer 1

这是因为您将数据定义为字符串，而 chart.js 需要带有数字的数组作为您的轴类型，更改此设置将使其正确显示

const optionsPagamentiBar = {
  responsive: true,
  maintainAspectRatio: false,
  plugins: {
    legend: {
      display: false
    },
    tooltip: {
      mode: "index",
      intersect: 0,
      usePointStyle: true,
      callbacks: {
        label: function(context) {
          return context.dataset.label + ": " + "€" + context.dataset.data.replace(/\d(?=(\d{3})+\.)/g, '$&,').replace(/[,.]/g, m => (m === ',' ? '.' : ','));
        }
      }
    }
  },
  scales: {
    y: {
      ticks: {
        display: true,
        beginAtZero: true,
        //fontSize: 10,
        //stepSize: 1,
        callback: function(value, index, values) {
          return "€" + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
        }
      },
      grid: {
        drawBorder: false,
        zeroLineColor: "transparent",
      }
    },
    x: {
      display: 1,
      ticks: {
        padding: 10,
        display: true,
        fontSize: 10,
        stepSize: 1,
        callback: function(value, index, values) {
          return "€" + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
        }
      },
      grid: {
        display: false
      }
    }
  }
}

const chartBarPayments = new Chart(document.getElementById("chartBarPayments").getContext('2d'), {
  type: 'bar',
  data: {
    labels: [],
    datasets: [{
      data: [],
    }]
  },
  options: optionsPagamentiBar
});
// this data is get from API
const data = {
  "labels": [
    "08:48",
    "08:53",
    "08:55",
    "09:20",
    "09:36",
    "10:18",
    "11:50"
  ],
  "datasets": [{
      "label": "Visa+bancom",
      "data": [9395.45],
      "backgroundColor": "rgb(255, 64, 64)"
    },
    {
      "label": "CONTANTI",
      "data": [6566.54],
      "backgroundColor": "rgb(224, 7, 152)"
    },
    {
      "label": "Arrot. l96/17",
      "data": [-0.05],
      "backgroundColor": "rgb(145, 10, 228)"
    },
    {
      "label": "gift",
      "data": [19.32],
      "backgroundColor": "rgb(57, 70, 255)"
    },
    {
      "label": "RESI",
      "data": [130.83],
      "backgroundColor": "rgb(5, 160, 218)"
    },
    {
      "label": "L.96/17",
      "data": [-0.01],
      "backgroundColor": "rgb(13, 233, 137)"
    },
    {
      "label": "SATISPAY",
      "data": [55.53],
      "backgroundColor": "rgb(77, 254, 51)"
    }
  ]
}


chartBarPayments.data = data;
chartBarPayments.update();

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.0/dist/chart.min.js"></script>

<canvas id="chartBarPayments"></canvas>

ChartJS yAxis 显示不一致的数据

ChartJS yAxis showing not coherent data

javascript

chart.js