как вставить динамические данные из sql в диаграмму с накоплением на диаграмме javascript

Я пытаюсь создать динамическую гистограмму с накоплением с помощью chartJS. Я знаю, как создать обычную гистограмму, но у меня возникает проблема, когда я пытаюсь создать столбчатую диаграмму с накоплением. Для столбчатой ​​диаграммы с накоплением структура данных отличается, и я знаю, как сжимать ее динамически, используя javascript в форме

var inchartdatasets = [];
for (var i = 0; i < leninchart; i++) {
    var inlabel = 'label: ' + "'" + inchartlebals[i] + "'";
    var indata = 'data: ' + '[' + inchart[i] + ']';
    var indataset = '{' + inlabel + ',' + indata + ',backgroundColor: color,}'
    inchartdatasets.push(indataset)
}

Приведенный выше код создает результат в следующем формате (это копия из предупреждения):

{label: 'AAA',data: [76.86],backgroundColor: color,},{label: 'Rating Unknown',data: [11.38],backgroundColor: color,},{label: 'BBB',data: [5.91],backgroundColor: color,},{label: '(1) others',data: [3.51],backgroundColor: color,}

Для создания диаграммы я использую:

var data = {
    datasets :[
    {inchartdatasets}
    ],
};
var chart = new Chart ( ctx, {
    type : "horizontalBar",
    data : data,
    options : options,
});

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

var data = {
        datasets :[
        {label: 'AAA',data: [76.86],backgroundColor: color,},{label: 'Rating Unknown',data: [11.38],backgroundColor: color,},{label: 'BBB',data: [5.91],backgroundColor: color,},{label: '(1) others',data: [3.51],backgroundColor: color,}
        ],
    };

диаграмма отображается правильно.

что мне здесь не хватает? почему он не отображается динамически? любая помощь приветствуется. Спасибо,


javascript dynamic chart.js stacked-chart
person davidzohar    schedule 13.12.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Проблема в том, что вы создаете строку, но данные, которые необходимо передать в chart.js, должны быть объектом JavaScript. Смотрите, взяв, например, строка '{' и объединение ее с другими значениями, вы получите другую строку, с которой chart.js не может работать.

Вместо этого вам нужно создать свои данные как объект, примерно так:

var inchartdatasets = [];
for (var i = 0; i < leninchart; i++) {
    var data = {
        label: inchartlebals[i],
        data: inchart[i],
        backgroundColor: color
    };
    inchartdatasets.push(data);
}

Эта страница MDN также может быть полезным ресурсом для лучше понять работу с объектами JavaScript.

person Piet    schedule 14.12.2019
comment
Большое спасибо @Piet. Почему-то это работает частично. Значения, отображаемые на диаграмме, представляют собой только первые цифры. например 76.86 будет отображаться как 7. есть идеи, почему это происходит? - person davidzohar; 15.12.2019
comment
Может быть еще одна проблема с типами данных, которые вы передаете, или со структурой ваших данных. Если вы можете обновить свой вопрос полным примером своего кода (например, в виде jsfiddle), я, возможно, смогу помощь. - person Piet; 15.12.2019
comment
Я воспроизвел проблему на jsfiddle.net/davidzohar/uqfgLzsw/25, любая помощь приветствуется. - person davidzohar; 16.12.2019
comment
Вот исправленная версия вашей скрипки. Проблема и основное изменение были в строке 99. Данные для набора данных всегда должны быть в форме массива, даже если они имеют только одно значение. Однако в вашем случае вы передавали значение напрямую, что не работает с Chart.js. - person Piet; 16.12.2019
comment
ты мужчина! Большое вам спасибо за большую помощь в этом. - person davidzohar; 17.12.2019