Chart.js: гистограмма показывает метки, а не данные

Я хочу нарисовать гистограмму с помощью chart.js, используя этот код (очень простой):

    this.plotEnergy = new Chart($('#plotEnergy'),
        {
            type: 'bar',
            animation: false,
            data:
                {
                    labels: ["aaa", "bbb"],
                    datasets: [ {
                        label: "ijoij",
                        backgroundColor: '#000000',
                        data: [2000, 2300]
                    },
                    {
                        label: "ijooijojij",
                        backgroundColor: '#FF00FF',
                        data: [1500, 2500]
                    }, 
                ]
                },
            options:
                {
                     tooltips:
                    {
                        mode: 'index',
                        intersect: false
                    },
                    title:
                        {
                            display: true,
                            text: 'Generated energy'
                        },
                    responsive: true,
                    scales:
                        {
                            xAxes: [
                                {
                                    stacked: 'false',
                                    position: 'bottom',
                                }],
                            yAxes: [
                                {
                                    stacked: false,
                                    scaleLabel:
                                        {
                                            display: true,
                                            labelString: 'Energy [kWh]'
                                        },
                                    ticks: {
                                        beginAtZero: true
                                    }
                                }]
                        }
                }


        });

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

Chart.js: гистограмма показывает метки, а не данные

У кого-нибудь есть идея?

Ваши параметры вызывают проблемы, вот образец, который я взял из ваших данных и сгенерировал этот jsbin: jsbin.com/jopudiwema/1/edit?html,css,js,output, не стесняйтесь изменять параметры в соответствии с тем, что вам нужно, и все будет в порядке.

John Baker 02.05.2018 10:54

О, я понимаю, это опция оси x "stacked: false", которая вызывала проблему. Большое спасибо!

Nicoowr 02.05.2018 11:01

Хорошо, рад, что ты узнал.

John Baker 02.05.2018 15:10
Поведение ключевого слова "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) для оценки ваших знаний,...
0
3
52
0

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