Что почитать для того что бы научится работе с графиками Chartjs в Django?

Question

Антон @8toni8

Что почитать для того что бы научится работе с графиками Chartjs в Django?

Подскажите что почитать для того что бы научится работе с графиками Chartjs в Django?

Вопрос задан более трёх лет назад
130 просмотров

Комментировать

Подписаться 1 Простой Комментировать

Решения вопроса 1

11 комментариев

Антон @8toni8 Автор вопроса

Конечно хотелось бы на русском, но я предполагаю что вы на это скажите:)))

Написано более трёх лет назад
Антон @8toni8 Автор вопроса

В первой ссылке, что то не густо там:( И на сколько я понял, процесс подключения там не описан? Там описан только код который необходимо в тело встраивать?

Написано более трёх лет назад
Антон @8toni8 Автор вопроса

Блин, теперь вопрос у меня встает другой, как подключить Chartjs :( Как он в body подключается?:(

Написано более трёх лет назад
Антон @8toni8 Автор вопроса

На сколько я понимаю, эту ссылку как то надо прописать?

Написано более трёх лет назад
Антон @8toni8 Автор вопроса
Нашел более менее понятное описание
Там в коде подключаются файлы:
<script src="js/Chart.min.js"></script> <script src="js/colors.js"></script> <script src="js.data/line-data.js"></script>

Но по ссылке на версию 2.6.0
Не могу там эти файлы отыскать:(
Опять чего то не понимаю?
Написано более трёх лет назад
Антон @8toni8 Автор вопроса

О вот что то связанное с установкой:)

Написано более трёх лет назад
Stalker_RED @Stalker_RED

Антон, почему 2.6.0 а не более свежую 2.7.2?

В том примере который вы смотрели colors.js и line-data.js - это файлы с данными. Их не будет в репозитории, вам придется их создать. Разработчики chart.js не могли заранее предсказать что именно вы будете показывать на графике и каким цветом.

Написано более трёх лет назад
Антон @8toni8 Автор вопроса

Stalker_RED, Ну про то что line-data сам создаешь, это я понял, там даже листинг функции randomScalingFactor есть, которая как раз будет генерить рандомные параметры... Кстати, разработчики могли бы взять на вооружение, для наглядности примеров:(
А вот по поводу того что необходимо создавать colors.js и что в нем должно хранится в примере не сказано:(

Написано более трёх лет назад

Антон @8toni8 Автор вопроса

Stalker_RED, Подскажите, я вообще правильно делаю?
Так выглядит основной html файл:

{% block content %}

  <!DOCTYPE html>
  <html>
      <head>
          <title>Bar Chart (chart.js)</title>
          <meta charset="UTF-8">
          <!-- Подключение библиотеки Chart -->
          <script src="js/Chart.min.js"></script>
          <!-- Подключение файлов данных -->
          <script src="js/colors.js"></script>
          <script src="js.data/line-data.js"></script>
      </head>
      <body>
        <p>Проверка работоспособности!</p>
         <!-- Определение местоположения и размера диаграммы -->
         <div id="container" style="border:1px solid #ccc;
                             width:550px;height:370px;padding:5px">
              <canvas id="chart"
                      width="540" height="360"></canvas>
         </div>
         <script>
         <!-- Определение конфигурации диаграммы -->
         var config = {
              type: 'line',
              data:barChartData
         };
         <!-- JavaScript создания диаграммы -->
         window.onload = function() {
           var ctx = document.getElementById("chart").getContext("2d");
           window.line = new Chart(ctx, config);
         };
         </script>
      </body>
  </html>


{% endblock %}

Так же я из гитхаба скопировал Chart.min.js и положил к себе в папку js:

В него поместил генератор случайных данных:

randomScalingFactor = function() {
    return Math.round(Math.random() * 100);
};

barChartData = {
    labels: [["Июнь","2015"], "Июль", "Август", "Сентябрь",
                            "Октябрь", "Ноябрь", "Декабрь",
             ["Январь","2016"],"Февраль", "Март", "Апрель", "Май"],
    datasets: [{
        label: 'Dataset1',
        fill: false,
        backgroundColor: color(chartColors.red).alpha(0.5)
                                               .rgbString(),
        borderColor: chartColors.red,
        borderWidth: 1,
        data: [
               randomScalingFactor(),
               randomScalingFactor(),
               . . .
        ]
    },
    {
        label: 'Dataset2',
        backgroundColor: color(chartColors.blue).alpha(0.5)
                                                .rgbString(),
        borderColor: chartColors.blue,
        borderWidth: 1,
        data: [
               randomScalingFactor(),
               randomScalingFactor(),
               . . .
        ]
    }]
};

А вот где создавать colors.js и что в него помещать не знаю:( Не нашел описание:(
Что то уже сделал не правильно?

Написано более трёх лет назад

Stalker_RED @Stalker_RED

Антон, я повторю: www.chartjs.org/samples/latest
выберите какой вам больше подходит, нажмите там ctrl+U и посмотрите код.

Я тоже не знаю что должно быть в color.js, на самой странице java-online.ru/chartjs.xhtml он вроде не используется. Оставим это на совести составителей примера.

Написано более трёх лет назад
Антон @8toni8 Автор вопроса

Stalker_RED, Действительно:) Как это я сам не додумался:) Ну теперь можно хоть немного попытаться пошаманить с ним:)

Написано более трёх лет назад