Как изменить цвет текста указанных c меток оси на графике JS? - PullRequest
0 голосов
/ 21 января 2020

Как изменить цвет текста указанных c меток оси на графике JS? enter image description here

Ответы [ 3 ]

0 голосов
/ 21 января 2020

Вы можете установить цвет галочки, как указано в документах :

new Chart(ctx, {
    type: "line",
    data: data,
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    fontColor: "white",
                    fontSize: 18,
                }
            }],
            xAxes: [{
                ticks: {
                    fontColor: "white",
                    fontSize: 14,
                }
            }]
        }
    }
});

См. https://www.chartjs.org/docs/latest/general/colors.html, чтобы увидеть, в каких форматах вы можете определять цвета.

РЕДАКТИРОВАТЬ: Теперь я вижу, что вы хотите установить цвета для Speci c меток. Насколько я могу найти, нет никакого способа сделать это.

0 голосов
/ 22 января 2020

Насколько я знаю, это невозможно (по крайней мере, на данный момент, версия 2.9, возможно, в следующих выпусках).

ticks.fontColor не является ни сценарием, ни индексируемым.

Одна вещь Вы можете закрасить линии сетки над галочками.

scales: {
  xAxes: [{
    gridLines: {
      color: ['#F00', '#0F0', '#F00', '#F00']
    }]
  }
}

Вы можете жестко закодировать цвета или использовать функцию, чтобы придать каждой линии сетки цвет.

0 голосов
/ 21 января 2020

Существует 4 специальных глобальных параметра, которые могут изменить все шрифты на графике. Эти параметры находятся в Chart.defaults.global. Глобальные параметры шрифта применяются только в том случае, если в конфигурацию не включены более конкретные параметры c.

Например, на этом графике весь текст будет красным, за исключением меток в легенде.

Chart.defaults.global.defaultFontColor = 'red';
let chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        legend: {
            labels: {
                // This more specific font property overrides the global property
                fontColor: 'black'
            }
        }
    }
});
...