chart.js - как рисовать и управлять линией, когда в диаграмме присутствует только одна метка js Linechart

Я использую Chart.JS v 2.9.3 для создания линейной диаграммы.

линейная диаграмма, показывающая общую сумму расходов по выбранному продукту за месяц

Например, если пользователь выберет продукт XYZ, то на этих диаграммах будут показаны ежемесячные расходы [январь 2021 г. – декабрь 2021 г.], и если соответствующие расходы на продукт будут только представить январь 2021, затем он отображает месяц по оси Y при взгляде

эталонное изображение

вот пример jsfiddle

  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. Есть ли возможность центрировать линейный график, когда на диаграмме присутствуют только одни данные?


javascript chart.js linechart
person Marty    schedule 08.04.2021    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Chart.js не поддерживает такой вариант использования, поскольку он дает искаженное изображение вашей диаграммы, поскольку точка и метка больше не совпадают. Если вы действительно этого хотите, вы можете заранее проверить в своем коде, есть ли там только 1 точка данных. Если это так, добавьте пустую строку в массив меток в начале и в конце и добавьте ноль в начале или в конце массива данных (или немного меньшее значение в качестве вашей единственной точки данных, чтобы весы не делали большие шаги ) вот так:

var config = {
  type: 'line',
  data: {
    labels: ["", "January-2021", ""],
    datasets: [{
      label: "month-year",
      data: [0, 134335066, 0],
      backgroundColor: "rgb(118, 101, 228)",
    }],
  },
  scales: {},
};

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>

person LeeLenalee    schedule 08.04.2021

arrow_upward
0
arrow_downward

Вы можете использовать опцию выравнивания:

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,
          position: 'bottom',
          align: 'center'
        },

  },
  scales: {},
};

см. это

person Micha    schedule 08.04.2021
comment
Спасибо за ответ, но я думаю, что это не решение, что, если у нас есть список на другой месяц, поскольку я уже описываю в вопросе расходы на продукт, доступные с января 2021 года по декабрь 2021 года, пожалуйста, дайте мне знать, если это вам непонятно :) - person Marty; 08.04.2021