0

Есть готовая библиотека графиков chart.js, как можно убрать label и подсказки при наведении на точки и сетку с заднего фона?

Сниппет: ссылка

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
  // The type of chart we want to create
  type: 'line',

  // The data for our dataset
  data: {
    labels: ["2015-10-01", "2015-10-01", "2015-10-01", "2015-10-01", "2015-10-01", "2015-10-01", "2015-10-01"],
    datasets: [{
      label: {
        display: false,
      },
      backgroundColor: 'rgb(255, 99, 132)',
      borderColor: 'rgb(255, 99, 132)',
      data: [0, 50, 100, 150, 200, 250, 300, 350, 400],
    }]
  },
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

1

1 ответ 1

2

Чтобы скрыть заголовок всплывающей подсказки, нужно вернуть пустую функцию

var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
  options: {
    legend: {
      display: false
    },
    scales: {
      xAxes: [{
        gridLines: {
          display: false
        }
      }],
      yAxes: [{
        gridLines: {
          display: false
        }
      }]
    },
    tooltips: {
      mode: false,
      callbacks: {
        title: function() {},
        label: function() {}
      }
    }
  },
  // The type of chart we want to create
  type: "line",
  // The data for our dataset
  data: {
    labels: [
      "2015-10-01",
      "2015-10-01",
      "2015-10-01",
      "2015-10-01",
      "2015-10-01",
      "2015-10-01",
      "2015-10-01"
    ],
    datasets: [{
      backgroundColor: "rgb(255, 99, 132)",
      borderColor: "rgb(255, 99, 132)",
      data: [0, 50, 100, 150, 200, 250, 300, 350, 400]
    }]
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

3
  • А как убрать клетки с фона и как убрать вот этот блок сверху? prntscr.com/jxswc3
    – uzi_no_uzi
    Commented 21 июн. 2018 в 21:58
  • legend:{display: false}
    – sashatexb
    Commented 21 июн. 2018 в 22:31
  • поправил options, проверяй
    – sashatexb
    Commented 21 июн. 2018 в 22:56

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.