0

В документации не могу найти информации, как снять левую цифровую панель(и возможно ли это вообще). Как её убрать, чтобы остались только диаграмма? введите сюда описание изображения

function myChart() {
  const densityCanvas = document.getElementById('myChart')

  Chart.defaults.global.defaultFontFamily = 'Segoe UI'
  Chart.defaults.global.defaultFontSize = 11

  const densityData = {
    label: '',
    data: [5427, 5243, 5514, 3933],
    backgroundColor: '#123ce1',
    borderWidth: 0,
    yAxisID: 'y-axis-density',
  }

  const gravityData = {
    label: '',
    data: [3.7, 8.9, 9.8, 3.7],
    backgroundColor: '#4f7afe',
    borderWidth: 0,
    yAxisID: 'y-axis-gravity',
  }

  const planetData = {
    labels: ['Mercury', 'Venus', 'Earth', 'Mars'],
    datasets: [densityData, gravityData],
  }

  const chartOptions = {

    scales: {
      xAxes: [{
        barPercentage: 1,
        categoryPercentage: 0.3,
      }, ],
      yAxes: [{
          id: 'y-axis-density',
        },
        {
          id: 'y-axis-gravity',
        },
      ],
    },
  }

  const barChart = new Chart(densityCanvas, {
    type: 'bar',
    data: planetData,
    options: {
      legend: {
        display: false
      },
      scales: {
        xAxes: [{
          barPercentage: 1,
          categoryPercentage: 0.3,
        }, ],
        yAxes: [{
            id: 'y-axis-density',
          },
          {
            id: 'y-axis-gravity',
          },
        ],
      },
    },
  })
}
myChart()

JSFiddle

1
  • это stackoverflow на русском, переведите вопрос, пожалуйста 13 дек 2020 в 12:01

1 ответ 1

0

Чтобы спрятать надписи можно использовать Tick Configuration, свойство display.

Добавьте:

ticks: {
    display: false
}

чтобы код выглядел так:

const barChart = new Chart(densityCanvas, {
    type: 'bar',
    data: planetData,
    options: {
        legend: {
            display: false
        },
        scales: {
            xAxes: [{
                barPercentage: 1,
                categoryPercentage: 0.3,
            },],
            yAxes: [{
                id: 'y-axis-density',
                ticks: {
                    display: false
                }
            },
            {
                id: 'y-axis-gravity',
                ticks: {
                    display: false
                }
            },
            ],
        },
    },
})

Ваш ответ

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

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