Как удалить метки шкалы оси X Chart.Js

Диаграмма

Я создал диаграмму с помощью chart.js, и она работает, как и ожидалось. Проблема в том, что мне не нужны метки оси x (скорость). Я смотрел на вопросы, подобные этому, но ни один из них не работал. Как скрыть метки оси X, не удаляя и не изменяя ничего другого в chart.js v3?


javascript chart.js linegraph
person PythonCoder    schedule 21.04.2021    source источник
comment
Эта диаграмма непреднамеренно забавна. Как быстро это происходило? Скорость.   -  person Deadron    schedule 21.04.2021
comment
@Deadron Я пробовал это, но, похоже, это не сработало   -  person PythonCoder    schedule 21.04.2021
comment
Вопрос дублирует следующее, чем тот, для которого он был закрыт: stackoverflow.com/questions/23424123/   -  person Charlie    schedule 22.04.2021
comment
@Charlie Я посмотрел и проверил ответы в посте, но ничего не сработало.   -  person PythonCoder    schedule 05.05.2021
comment
Решения, приведенные в обоих ответах, работают. Принятый ответ выполняется на самой этой странице и не содержит меток X.   -  person Charlie    schedule 06.05.2021
comment
я пробовал решения, прежде чем опубликовать это, и они не работают для меня @Charlie   -  person PythonCoder    schedule 06.05.2021
comment
Это означает, что у вас есть другая ошибка, чем то, что вы разместили здесь. Вы можете увидеть, как это работает, если вы запустите ответ @LeeLenalees прямо на странице.   -  person Charlie    schedule 06.05.2021
comment
@Charlie большинство не выдало ошибки   -  person PythonCoder    schedule 06.05.2021
comment
Ответ @LeeLenaLees не был в возможном дублирующемся ответе   -  person PythonCoder    schedule 06.05.2021

Ответы (2)


arrow_upward
2
arrow_downward

Вы можете сделать две вещи: либо предоставить массив меток с пустыми строками, либо использовать обратный вызов тика для предоставления пустых меток.

 scales: {
            x: {
                ticks: {
                    // Include a dollar sign in the ticks
                    callback: function(value, index, values) {
                        return '';
                    }
                }
            }
        }

Пример:

var options = {
  type: 'line',
  data: {
    // option 1, provide empty strings for labels array
    labels: ["", "", "", "", "", ""],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderWidth: 1
      }
    ]
  },
  options: {
    scales: {
      x: {
        ticks: {
          //option 2, use callback to change labels to empty string
          callback: () => ('')
        }
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.js" integrity="sha512-aWx9jeVTj8X49UzUnUHGIlo6rNne1xNsCny/lL0QwUTQK2eilrHXpSk9xbRm4FJ4eLi2XBmnFlRkWPoChSx8bA==" crossorigin="anonymous"></script>
</body>

person LeeLenalee    schedule 21.04.2021

arrow_upward
1
arrow_downward

Просто отключите метки оси x одним флагом, например:

 options: {
    scales: {
      x: {
        ticks: {
          display: false
        }
      }
    }
 }
person Charlie    schedule 21.04.2021
comment
Не будет работать, chart.js нужны метки для сопоставления данных, поэтому отсутствие этого массива и только массив чисел для данных ничего не показывает. - person LeeLenalee; 21.04.2021
comment
@LeeLenalee Вы правы. Ответ отредактирован. - person Charlie; 22.04.2021
comment
Я пробовал это, но это не сработало - person PythonCoder; 05.05.2021