BlackTrub
@BlackTrub
Костыль developer

Chart.js — два графика на одной странице?

Есть два canvas для отображения графиков с помощью библиотеки Chartjs:
<canvas id="chart_followers_unfollowers" width="400" height="200"></canvas>
<canvas id="chart_followers" width="400" height="200"></canvas>


Графики я строю не при загрузке страницы, а при получении данных с помощью ajax, не знаю имеет ли это значение.
Далее скрипт для генерации графиков:
function data_for_chart_follow_unfollow(dates_range, followers, unfollowers) {

  var data = {
    labels: dates_range,
    datasets: [ Пропустим данные для краткости ]
  };
  return data
}

function data_for_chart_growth_followers(dates_range, followers) {

  var data = {
    labels: dates_range,
    datasets: [ Пропустим данные для краткости ]
  };

  return data

}

function show_charts(dates_range, followers, unfollowers) {
  var ctx = document.getElementById('chart_followers_unfollowers').getContext('2d');

  var chart_follow_unfollow = new Chart(ctx, {
    type: 'line',
    data: data_for_chart_follow_unfollow(dates_range, followers, unfollowers),
    options: {
      title: {
        display: true,
        text: 'Динамика добавления подписчиков и отписки',
        fontSize: 21
      },
      responsive: true
    }
  });

  var ctx = document.getElementById('chart_followers_unfollowers').getContext('2d');
  var chart_growth_followers = new Chart(ctx, {
    type: 'line',
    data: data_for_chart_growth_followers(dates_range, followers),
    options: {
        title: {
            display: true,
            text: 'Динамика роста подписчиков',
            fontSize: 21
        },
      responsive: true
    }
  });

}


Так вот, первые две функции для формирования данных, а функция show_charts как раз для отображения наших графиков.
Суть проблемы: Отображается только второй график, я так понимаю он рисует последний график, пробовал менять var ctx = document.getElementById('chart_followers_unfollowers').getContext('2d') на разные переменные - не помогает. Гуглилить пробовал, найденные варианты не помогают.
Понимаю что проблема элементарная, но уже потратил на неё много времени, пните в нужную сторону.
  • Вопрос задан
  • 3123 просмотра
Решения вопроса 1
@OVK2015
Вас не смущает, что выбираете одну и ту же canvas chart_followers_unfollowers для разных графиков?
А переменные var ctx для них сделайте все таки разными,- вдруг с графиками потом еще и работать нужно :)
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы