Блог

Главная - Вопросы по программированию - Chart.js скрытая этикетка

Chart.js скрытая этикетка

#javascript #chart.js

Вопрос:

Есть ли способ скрыть текст в нижней части каждого цилиндра? Прямо сейчас меня раздражает, что текст перекрывает другой текст, и именно поэтому я хочу, чтобы он исчез. У меня есть необходимая информация в черном поле при наведении. Изображение

Это мой код

newArrName-это сборка arry, подобная следующей: [[name1, name1, …], [name2, name2, …]]

 var newChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: newArrName,
            datasets: [{
                    label: 'Passed',
                    data: passArray,
                    backgroundColor: 'rgb(150,238,144)'
                },
                {
                    label: 'Failed',
                    data: failArray,
                    backgroundColor: 'rgb(204,0,0)'
                },
                {
                    label: 'Not Run',
                    data: notrunArray,
                    backgroundColor: 'rgb(0,109,204)'
                },
                {
                    label: 'Error',
                    data: errorArray,
                    backgroundColor: 'rgb(204,112,0)'
                },
                {
                    label: 'NA',
                    data: naArray,
                    backgroundColor: 'rgb(33,33,33)'
                }
            ]
        },
        options: {
            title: {
                display: true,
                text: title
            },
            tooltips: {
                mode: 'index',
                intersect: false,
            },
            hover: {
                mode: 'nearest',
                intersect: true
            },
            responsive: false,
            maintainAspectRatio: false,
            scales: {
                xAxes: [{
                    stacked: true,
                    ticks: {
                        stepSize: 1,
                        min: 0,
                        autoSkip: false
                    }
                }],
                yAxes: [{
                    stacked: true,
                    ticks: {
                        maxTicksLimit: 5,
                        min: 0
                    }
                }]
            }

        }
    });

Ответ №1:

Вы можете установить галочки display: false в своей шкале xAxes

Живой пример (V2):

 var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    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: {
      xAxes: [{
        ticks: {
          display: false
        }
      }]
    }
  }
}

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/2.9.4/Chart.js"></script>
</body>

Правильный ответ:

 var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    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: {
          display: false
        }
      }
    }
  }
}

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.4.0/chart.js"></script>
</body>

Комментарии:

1. Спасибо. Приятно знать, что мне нужна была только одна строка 😀

Метки: