Блог

Я пытаюсь создавать графики с помощью QuickChart и диаграммы.Js с HTML. У меня есть следующее, но я хочу выяснить, как изменить размер шрифта и стиль шрифта для всего текста. Я также хочу изменить yAxis go на 10. Кто-нибудь может помочь?

Ответы, которые вы ищете, находятся в Chart.js документация.

Во-первых, чтобы изменить yAxis на 10, используйте options.scales.yAxes.ticks.suggestedMax (chart.js документ).

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

• Для легенды используйте options.legend.labels.fontColor/fontStyle/fontFamily (chart.js документ).

• Для осей используйте options.scales.<axis>.ticks.font* (chart.js документ).

• Для заголовка диаграммы используйте options.title.font* (chart.js документ).

Соедините все это вместе:

 {
  type: 'line',
  data: {
    labels: ['January', 'February', 'March', 'April', 'May'],
    datasets: [{
      label: 'Dogs',
      data: [5,6,7,8,9],
      fill: false,
      borderColor: 'red',
    }, {
      label: 'Reality',
      data: [6,6,5,9,9],
      fill: false,
      borderColor: 'green',
    }]
  },
  options: {
    legend: {
      position: 'bottom',
      labels: {
        fontSize: 20,
        fontStyle: 'bold',
      }
    },
    title: {
      display: true,
      text: 'Dogs v Cats',
      fontSize: 20,
    },
    scales: {
      yAxes: [
        {
          ticks: {
            suggestedMax: 10,
            beginAtZero: true,
            fontFamily: 'Mono',
          },
        },
      ],
      xAxes: [
        {
          ticks: {
            fontFamily: 'Serif',
            fontStyle: 'italic',
          },
        },
      ],
    },
  },
}
  

Ссылка на QuickChart