Блог

Я искал ответ, пока не нашел правильного решения… но я извлекаю данные для ChartJS из файла CSV, и в этом файле CSV один из столбцов содержит данные, в которых есть запятые … вот пример данных в файле CSV:

 "Group","Number of Times","Status"
"Group1","1,377","Handled"
"Group1","877","Not-Handled"
"Group2","132,377","Handled"
"Group2","878","Not-Handled"
"Group3","14,268","Handled"
"Group3","1,231","Not-Handled"
 

Я могу получить CSV-файл, извлеченный в ChartJS, но запятые в полях «Количество раз» отбрасывают данные и заставляют их отображаться неправильно, когда у него есть число, достаточно большое, чтобы иметь запятую (т.Е. Если число для «Group1» равно 877, то значениепоявляется строка, но число, равное 1,377, не может быть проанализировано и отображено должным образом).

Я пробовал всевозможные решения, такие как удвоение кавычек вокруг «Количества раз», добавление их к данным, попытка присоединиться к полю, поэтому я игнорирую запятые (что кажется глупым) и т. Д., Но, похоже, не могу решить, почему он не будет просто игнорировать запятые внутри двойных кавычекили не разбивать ChartJS все вместе. Вот часть кода, которая, на мой взгляд, актуальна:

 var fullFD = "01December2020";
var file = 'http://localhost/Daily_Chart_'   fullFD   '.csv';
d3.csv(file).then(makeChart);
    function makeChart(alerts) {
    var groupsLabel = alerts.map(function(d) {return d["Group"]});
    var numbersData = alerts.map(function(d) {return  d["Number of Times"]});
    var statusColors = alerts.map(function(d) {return d["Status"] === 'Handled' ? '#F15F36' : '#19A0AA';});

            var chart = new Chart('chart', {
                type: 'horizontalBar',

                data: {
                    labels: groupsLabel,
                    datasets: [
                        {
                            data: numbersData,
                            backgroundColor: statusColors,
                        }
                    ]
                },
 

Я новичок в JavaScript и ChartJS, поэтому, пожалуйста, не думайте обо мне слишком плохо 🙂 Какие-либо предложения или я пропустил кого-то еще, кто задавал этот точно такой же вопрос и решил его?

Виновником является эта строка:

 var numbersData = alerts.map(function(d) {return  d["Number of Times"]});
 

Если вы зарегистрируете значение numbersData в консоли, вы увидите что-то вроде этого:

Array(6) [ NaN, 877, NaN, 878, NaN, NaN ]

Как вы уже поняли, это связано с запятой внутри вашего номера. Поскольку вы добавляете перед возвратом d["Number of Times"] , он в конечном итоге пытается преобразовать строку, например, 1,377, в число, терпит неудачу (из-за запятой) и, таким образом, возвращает NaN — что означает не число.

Одним из простых решений является замена всех запятых чисел внутри вашего файла .csv точкой (.).

1,377 -> 1.377

Если вы не хотите изменять сам файл .csv, вы можете заменить все вхождения запятой точкой, используя javascript:

 var numbersData = alerts.map(function(d) {let num=d["Number of Times"]; num=num.replaceAll(",","."); return Number(num);});