Скрытие меток на оси Y в Chart.js

Мне нужно скрыть метки в линейной диаграмме, нарисованной с использованием библиотеки chart.js . Я погуглил, но не повезло. Может ли это быть скрыто?

Спасибо

17 голосов | спросил Supriya Kale 25 FebruaryEurope/MoscowbWed, 25 Feb 2015 13:21:59 +0300000000pmWed, 25 Feb 2015 13:21:59 +030015 2015, 13:21:59

9 ответов


0

Чтобы скрыть только метки, в последней версии (2.3.0) Charts.js отключите ticks следующим образом:

options: {
    scales: {
        yAxes: [{
            ticks: {
                display: false
            }
        }]
    }
}
ответил Gene Parcellano 4 52016vEurope/Moscow11bEurope/MoscowFri, 04 Nov 2016 23:45:19 +0300 2016, 23:45:19
0

Это позволит скрыть метки по оси Y: (но не по оси X)

    scaleShowLabels: false,
ответил Alex 18 PM000000120000003331 2015, 12:48:33
0

Для версии 2 это можно сделать с помощью параметра Scales в глобальной конфигурации.

  var ctx = document.getElementById("log");
  var chart = new Chart(ctx, {
      type: 'line',
      options: {
        scales: {
          xAxes: [{
            display: false
          }],
          yAxes: [{
            display: false
          }],
        }
      },
      data: {
        labels: ['Item 1', 'Item 2', 'Item 3'],
        datasets: [{
            fill: false,
            borderWidth: 1,
            data: [10, 20, 30]
        }]
      }
    });
ответил kehers 7 J0000006Europe/Moscow 2016, 13:54:53
0

Решено с переопределением ширины меток по оси Y

Chart.Scale.prototype.buildYLabels = function () {
  this.yLabelWidth = 0;
};
ответил Anton Grigoryev 9 AM00000090000000631 2015, 09:14:06
0

попробуйте это

 var statDat = {
    labels: ["January", "February", "March", "April", "May", "June"],
    datasets: [
        {
            fillColor: "rgba(255, 152, 0, 0.30)",
            strokeColor: "#f26b5f",
            pointColor: "#f26b5f",
            pointBackgroundColor: "rgba(179,181,198,1)",
            pointBorderColor: "#00fff5",
            pointStrokeColor: "#f26b5f",
            data: [203, 156, 99, 251, 305, 247]
        }
    ]
};

var stats = document.getElementById('stats').getContext('2d');

var options = {
    scaleShowLabels: false 
};

new Chart(stats).Line(statDat, options);
ответил Charitha Goonewardena 10 Jpm1000000pmTue, 10 Jan 2017 22:37:39 +030017 2017, 22:37:39
0

вы можете использовать опцию scaleShowLabels

ответил Tune389 25 FebruaryEurope/MoscowbWed, 25 Feb 2015 13:27:17 +0300000000pmWed, 25 Feb 2015 13:27:17 +030015 2015, 13:27:17
0

Это сработало для меня с Chartjs v2.4.0

Идея состоит в том, чтобы установить для backDropColor полную прозрачность. 255,255,255 - белый, но 0 устанавливает прозрачность.

Затем userCallback всегда возвращает пустую строку.

Конечный результат - скрытые метки оси Y.

  ticks: {
    backdropColor : "rgba(255,255,255,0)",
    userCallback: function(value, index, values) {
      return "";
    }
  }
ответил Jannunen 16 Jpm1000000pmMon, 16 Jan 2017 12:36:41 +030017 2017, 12:36:41
0
options: {
    scales: {
        yAxes: [{
            gridLines: {
              display: true,
              color: 'rgba(219,219,219,0.3)',
              zeroLineColor: 'rgba(219,219,219,0.3)',
              drawBorder: false, // <---
              lineWidth: 27,
              zeroLineWidth: 1                 
            },
            ticks: {
                beginAtZero: true,
                display: true
            }
        }]
    }
}
ответил mQuiroz 27 J0000006Europe/Moscow 2018, 21:55:02
0
Chart.defaults.scale.ticks.display = false;
ответил memo 12 WedEurope/Moscow2018-12-12T19:57:26+03:00Europe/Moscow12bEurope/MoscowWed, 12 Dec 2018 19:57:26 +0300 2018, 19:57:26

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132