Chart.js - Как добавить текст в метку диаграммы с помощью JavaScript?

я не знаю, как добавить текст в метку JavaScript диаграммы. Моя диаграмма используется на ПК и планшете.

сейчас диаграмма

Chart.js - Как добавить текст в метку диаграммы с помощью JavaScript?

Но мне нужно пометить чувствительные зоны примерно так:

Chart.js - Как добавить текст в метку диаграммы с помощью JavaScript?

Chart.js - Как добавить текст в метку диаграммы с помощью JavaScript?

<canvas id = "myChart" width = "500" height = "400"></canvas>

==== Мой код (в данных 1 этикетки 12 месяцев - 10 лет = 1 полоса)

var color = Chart.helpers.color;
var barChartData = {

    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    datasets: [{
        type: 'bar',
        label: '<?php echo $year9+543; ?>',
        fill: false,
        borderColor: "rgba(235,189,139,1)",
        data: <? php echo $data_target9_month; ?>
    }, ... Array data ...

редактировать график

window.onload = function () {
    var ctx = document.getElementById('canvas').getContext('2d');
    window.myBar = new Chart(ctx, {
        type: 'bar',
        data: barChartData,
        options: {
            elements: {
                line: {
                    tension: 0
                }
            },
            tooltips: {
                mode: 'index',

                intersect: false,
                callbacks: {
                    label: function (tooltipItem, data) {
                        var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
                        if (parseInt(value) >= 1000) {
                            return data.datasets[tooltipItem.datasetIndex].label + " : " + '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                        }
                        if (parseInt(value) == 0) {
                            return data.datasets[tooltipItem.datasetIndex].label + " : " + 'ไม่มีข้อมูล';
                        }
                        else {
                            return data.datasets[tooltipItem.datasetIndex].label + " : " + '$' + value;
                        }

                    }
                } // end callbacks:
            }
        }
    })

благодаря.

Покажите, пожалуйста, свой код.

mickmackusa 16.01.2019 05:52

Непонятно, чего ты хочешь. Глядя на второе изображение, которое вы предоставили, я все еще не очень хорошо понимаю, что вам нужно. Вы хотите добавить эти поля с соответствующими названиями месяцев?

adelriosantiago 21.01.2019 08:05
i.stack.imgur.com/uhIp9.png @adelriosantiago я хочу добавить текст, такой же, как мой excel
M'Instrucs 21.01.2019 08:12

@ M'Instrucs проверит мой ответ и дайте мне знать, если это поможет.

adelriosantiago 21.01.2019 08:30
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
4
1 490
1

Ответы 1

Это наверняка достижимо с использованием методов Chart.JS, но лучший и самый простой способ сделать это - просто перекрыть тексты, которые вы хотите добавить, используя position: absolute; в каждом текстовом поле.

Взгляните на этот JSFiddle: https://jsfiddle.net/gxjw5hLb/

Конечно, вам нужно будет вычислить и заменить значения для каждого "X",

<td><span>X=1000</span></td>
<td><span>X=2500</span></td>
<td><span>X=3000</span></td>

Также для ящиков потребуется дополнительный стиль CSS.

i.stack.imgur.com/yFtmG.png Я хочу, чтобы он отвечал на нескольких устройствах.
M'Instrucs 21.01.2019 08:46

@ M'Instrucs, на мобильных это выглядит плохо, потому что для простоты я привязал текст к верхней части страницы. Вы можете обернуть диаграмму и текст в родительский контейнер, сделав эту оболочку position: relative;, и тогда текст будет автоматически адаптироваться к размеру диаграммы. Попробуйте и дайте мне знать, если у вас возникнут проблемы.

adelriosantiago 26.01.2019 09:22

@ M'Instrucs ответ оказался полезным? Вам нужны дополнительные указания?

adelriosantiago 02.02.2019 22:17

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