Я хотел бы показать линейный бар в chart.js с данными, автоматически выбираемыми из mockapi

Question

Я борюсь со своим вторым графиком в chart.js и не могу найти ответ на свой вопрос ... У меня есть массив с датами и суммами. Я хотел бы поместить эти значения из массива автоматически на график. Я пробовал простой способ, но он не работает ... Месяцы - это массив с датами получения суммы, myData представляет собой массив с количеством пожертвований. Вот код:

let DonationChart2 = new Chart(myChart2, {
    type: 'bar',
    data: {
        labels: [Months],
        datasets: [{
            data: [myData]

        }]
    },
})

Месяцы видны, но, к сожалению, не в виде отдельных меток - просто в 1 столбце ... Я хотел бы видеть их как нижнее описание под каждой суммой ... Сумма пожертвования видна только тогда, когда я пишу myData [здесь позиция в массиве], в противном случае пусто .... Я предполагаю, что я присвоил эти значения неправильно .. вероятно, как-то я должен указать, чтобы показать каждое значение как отдельное? но я не знаю как ... это мой первый день с chart.js ... отсюда и эти проблемы ...

Answer 1

С вашими переменными Months и myData вы помещали их в другой массив ([] вокруг имени переменной). Из-за этого на графике видна только 1 метка и 1 точка данных, а это не то, что вам нужно.

Я удалил внешний [], чтобы в качестве метки и данных для конфигурации были установлены только ваши массивы.

Еще одна вещь, которую я ожидал, это то, что вы будете иметь дело с длинными именами меток (например, Mon Dec 17 2018 16:36:04 GMT+0100 (Central European Standard Time)), которые не будут хорошо выглядеть на вашем графике.

Чтобы исправить это, я сократил дату, создав новую дату obj и используя toLocaleString . Я также читал, что если метка представлена ​​в виде массива, а не одной строки, то каждая часть будет на новой строке.

Здесь .split (",") может помочь. toLocaleString() возвращает, например, строку "12/20/2018, 12:00:00 PM", поэтому функция split будет разбивать эту строку везде, где есть запятая, и отправлять результат в массив. Полученный массив будет иметь индекс 0 как 12/20/2018 и индекс 1 как 12:00:00 PM, поэтому каждый будет находиться на отдельной строке на графике.

const myData = ["60", "80", "5", "100", "60"];
const months = ["Mon Dec 17 2018 16:36:04 GMT+0100 (Central European Standard Time)", "Mon Dec 17 2018 17:36:34 GMT+0100 (Central European Standard Time)", "Thu Dec 20 2018 09:34:18 GMT+0100 (Central European Standard Time)", "Thu Dec 20 2018 09:37:16 GMT+0100 (Central European Standard Time)", "Thu Dec 20 2018 12:41:51 GMT+0100 (Central European Standard Time)"];

let newMonths = months.map(function(date){
  return new Date(date).toLocaleString().split(",");
});

let myChart2 = document.getElementById("myChart2").getContext('2d');
let DonationChart2 = new Chart(myChart2, {
  type: 'bar',
  data: {
    labels: newMonths,
    datasets: [{
      label: 'Amount',
      data: myData
    }]
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js"></script>

<canvas id="myChart2" width="1000" height="900"></canvas>