Блог

Я пытаюсь имитировать этот Radarchart с помощью ChartJS.

Как смещать тики влево вот так?

что у меня есть (ниже)

         options: {
            scale: {
                ticks: {
                    min: 0,
                    max: 5,
                    stepSize: 1,
                    showLabelBackdrop: false,
                    beginAtZero: true,
                },
                gridLines: {
                    color: 'rgba(0, 0, 0, 0.3)'
                },
                angleLines: {
                    display: false
                },
            },
        },
 

Дополнительно: возможно ли отображение 0?

Вам нужно сделать две вещи.

1. Чтобы отобразить галочку 0, добавьте это в свой options.scale объект:

 ticks: {
  beginAtZero: true,
  min: -0.001,
}
 

Обратите внимание, что если вы установите min значение в ноль, это не сработает. Вот как работает механизм тиков radar.

2. Чтобы добавить смещение к метке, переопределите обратный вызов рендеринга галочки внутри того же объекта, например:

 ticks: {
  callback: (value) => `${value}           `,
}
 

Обратите внимание на дополнительные пробелы в конце. Это дополнение. Смотрите пример ниже

 var options = {
  responsive: false,
  maintainAspectRatio: true,
  scale: {
    ticks: {
      beginAtZero: true,
      callback: (value) => `${value}           `,
      min: -0.001,
      max: 5
    }
  }
};

var dataLiteracy = {
  labels: [
    "1", "2", "3", "4", "5"
  ],
  datasets: [{
    label: "Literacy",
    backgroundColor: "rgba(179,181,198,0.2)",
    borderColor: "rgba(179,181,198,1)",
    pointBackgroundColor: "rgba(179,181,198,1)",
    pointBorderColor: "#fff",
    pointHoverBackgroundColor: "#fff",
    pointHoverBorderColor: "rgba(179,181,198,1)",
    data: [
      2, 3, 4, 1, 2
    ]
  }]
};

var ctx = document.getElementById("canvas");
var myRadarChart = new Chart(ctx, {
  type: 'radar',
  data: dataLiteracy,
  options: options
}); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js"></script>

<canvas id="canvas" height="400" width="400"></canvas> 

Попробуйте сделать это в настройках диаграммы:

  ticks: {
    callback: (value) => {
      return '${value}';
    },