Chartjs 4.2.1 изменить стиль datalabes vue

Я использую Vue и ChartJS и хочу изменить стиль меток данных.

У меня есть 3 метки данных, я хочу изменить стиль второй метки на жирный с обычного.

Что я пробовал - 1

plugins: {
    legend: {
        display: false,
    },
    tooltip: {
        enabled: false,
    },
    datalabels: {
        formatter: function (value, context) {
            if (context.dataIndex === 1) {
                var ctx = context.chart.ctx;
                ctx.font = "bold 20px 'Noto Sans Kr', sans-serif";
                ctx.fillStyle = "#333";
                console.info(ctx.fontWeight);
            }
            return value + "원";
        },
    },
},

Что я пробовал - 2

plugins: {
    legend: {
        display: false,
    },
    tooltip: {
        enabled: false,
    },
    datalabels: {
        formatter: function (value, context) {
            if (context.dataIndex === 1) {
                return {
                    text: value,
                    style : {
                        weight: 'bold'
                    }
                }
            }
            return value + "원";
        },
    },
},

Текст возврата номер 2 — [object object], поэтому я не могу подтвердить, что стиль thT работает хорошо.

Пожалуйста, помогите мне изменить индивидуальный стиль баз данных.

Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
0
0
65
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Чтобы изменить шрифт, вы должны реализовать параметры сценария для параметров font, а не для formatter.

  datalabels: {
    font: (context) => context.dataIndex === 1 ? ({weight: 'bold'}) : undefined 
    formatter: (value) => value + "원"
  },

внутри функции веса шрифта не работает. Я изменился так. </br> --- метки данных: { шрифт: { вес: (контекст) => { console.info(контекст); вернуть context.dataIndex === 1 ? «жирный»: не определено; }, }, formatter: (value) => value + "원" }, --- но console.info никогда не показывает...

helpme 20.04.2023 10:26

моя вина. параметры шрифта доступны для сценариев, а не отдельные свойства. Я собираюсь обновить ответ

user2057925 20.04.2023 10:34

попробуйте сейчас с новым кодом или загляните в codepen: codepen.io/stockinail/pen/wvYoWgW Дайте мне знать, работает ли он и у вас.

user2057925 20.04.2023 10:37

Спасибо! оно работает! и у меня есть вопрос. если я сделаю так. ``` метки данных: { привязка: 'конец', выравнивание: 'конец', смещение: 0, метки: { название: { шрифт: { размер: 12, }, }, }, шрифт: (контекст) => (isMiddle (контекст) ? { вес: 'жирный' } : не определено), форматер: (значение) => значение + '원', }, ``` полужирный не работает. но если я удалю ``` font: {size: 12, }, ```, это сработает. почему?

helpme 20.04.2023 13:32

он должен работать. Можете ли вы создать codepen для воспроизведения вашего варианта использования?

user2057925 20.04.2023 14:41
codepen.io/sori-sodong/pen/LYgbJVY В этом js-коде, если я удалю // коды, он не будет работать. TT.. Я хочу знать причину
helpme 21.04.2023 03:20

Давайте продолжим обсуждение в чате.

helpme 21.04.2023 03:27

Другие вопросы по теме