Блог

Главная - Вопросы по программированию - chart.js надписи размер шрифта текста и цифры размер шрифта текста слишком мал

chart.js надписи размер шрифта текста и цифры размер шрифта текста слишком мал

#chart.js

Вопрос:

Я хотел бы увеличить размер следующих элементов. Не могли бы вы отредактировать приведенный ниже код, чтобы увеличить эти элементы:

  • размер текста этикетки (поля NaCl и SalinityDrift над диаграммой)
  • сами числа в осях x,y,y2

Скрипт:

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.30.1/date_fns.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/1.1.1/chartjs-plugin-zoom.min.js"></script>  <canvas id="myChart"></canvas>  <script type="text/javascript">  $("#myChart").width( $(window).width() *0.97 );  $("#myChart").height( $(window).height() * 0.8 );   var ctx = document.getElementById('myChart').getContext('2d');   const options = {  type: 'line',  data: {  datasets: [  {  label: 'NaCl',  data: natriumChrolideData,  borderColor: 'blue',  yAxisID: 'y',  },  {  label: 'Salinity drift',  data: salinityDriftData,  borderColor: 'red',  yAxisID: 'y2',  },   ]  },  options: {  parsing: false,  normalized: true,  animation: false,  responsive: false,  scales: {  x: {  type: 'time',  title: {  display: true,  text: 'Time (client time zone)',  font: {  size: 24  }  },  },  y: {  title: {  display: true,  text: 'NaCl storage, kg',  font: {  size: 24  }  }  },  y2: {  title: {  display: true,  text: 'Salinity drift, %',  font: {  size: 24  },  ticks: {  min: 0,  },  }  },  },  plugins: {  zoom: {  pan: {  enabled: true,  onPanStart({chart, point}) {  // alert("pan works!");  },  mode: 'x',  },  zoom: {  wheel: {  enabled: true,  },  pinch: {  enabled: true  },  mode: 'x',  }  }  },  }  }   new Chart(ctx, options); </script>

Пример полученного графика: введите описание изображения здесь

Примечание: Я нашел некоторые решения для использования fontSize или tick.font или tick.fontSize , но либо я реализовал их неправильно, либо они по какой-то причине не работают.

Ответ №1:

Вы помещаете ticks конфигурацию в заголовок шкалы, в то время как она должна находиться в корне самой шкалы. Также для полей размер шрифта сверху вам нужно настроить его в options.plugins.legend.labels пространстве имен.

Живой пример:

 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: {  plugins: {  legend: {  labels: {  font: {  size: 20  }  }  }  },  scales: {  x: {  ticks: {  font: {  size: 20  }  }  },  y: {  ticks: {  font: {  size: 20  }  }  }  }  } }  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.5.1/chart.js"></script> </body>
Метки: