Блог

Пожалуйста, если вы успешно работали в течение месяцев или другого времени, например, лет, в Django chartjs, пожалуйста, поделитесь ссылкой, где я могу посмотреть, как она используется. Поскольку я не могу понять, почему мой не работает, в тот момент, когда я помещаю ось x, она не показывает никаких данных.

Но если я удалю часть оси x, она будет работать отлично. моя главная цель — отобразить месяцы, чтобы я мог получить в них некоторые данные. Любая помощь будет очень признательна.

Ниже приведен обновленный фрагмент сценария

     <script>
      $(document).ready(function(){
      var ctx2 = document.getElementById("myChart2");
          var myChart2 = new Chart(ctx2, {
            type: "bar",
            data: {
              datasets: [
                {
                  label: "US Dates",
                  data: [
                    {
                      x: "04/01/2014",
                      y: 175,
                    },
                    {
                      x: "10/01/2014",
                      y: 175,
                    },
                    {
                      x: "04/01/2015",
                      y: 178,
                    },
                    {
                      x: "10/01/2015",
                      y: 178,
                    },
                  ],
                  backgroundColor: "rgba(255, 99, 132, 0.2)",
                  borderColor: "rgba(255, 99, 132, 1)",
                  borderWidth: 2,
                },
                {
                  label: "UK Dates",
                  data: [
                    {
                      x: "04/01/2014",
                      y: 143,
                    },
                    {
                      x: "10/1/2014",
                      y: 175,
                    },
                    {
                      x: "04/01/2015",
                      y: 165,
                    },
                    {
                      x: "10/1/2015",
                      y: 178,
                    },
                  ],
                  backgroundColor: "rgba(99, 255, 132, 0.2)",
                  borderColor: "rgba(99, 255, 132, 1)",
                  borderWidth: 2,
                },
              ],
            },
            options: {
              responsive: true,
              title: {
                display: true,
                text: "Chart.js Time Scale",
              },
              scales: {
                xAxes: [
                  {
                    type: "time",
                    position: "bottom",
                    time: {
                      displayFormats: { day: "MM/YY" },
                      tooltipFormat: "DD/MM/YY",
                      unit: "month",
                    },
                  },
                ],
                yAxes: [
                  {
                    scaleLabel: {
                      display: true,
                      labelString: "value",
                    },
                  },
                ],
              },
            },
          });
    })
    </script>
  

С опцией для оси x проблем нет.

Держу пари, что есть проблема с набором данных.

Должен быть указан набор данных из x и y.

Следующий фрагмент поможет вам.

 var ctx2 = document.getElementById("myChart2");
      var myChart = new Chart(ctx2, {
        type: "bar",
        data: {
          datasets: [
            {
              label: "US Dates",
              data: [
                {
                  x: "04/01/2014",
                  y: 175,
                },
                {
                  x: "10/01/2014",
                  y: 175,
                },
                {
                  x: "04/01/2015",
                  y: 178,
                },
                {
                  x: "10/01/2015",
                  y: 178,
                },
              ],
              backgroundColor: "rgba(255, 99, 132, 0.2)",
              borderColor: "rgba(255, 99, 132, 1)",
              borderWidth: 2,
            },
            {
              label: "UK Dates",
              data: [
                {
                  x: "04/01/2014",
                  y: 143,
                },
                {
                  x: "10/1/2014",
                  y: 175,
                },
                {
                  x: "04/01/2015",
                  y: 165,
                },
                {
                  x: "10/1/2015",
                  y: 178,
                },
              ],
              backgroundColor: "rgba(99, 255, 132, 0.2)",
              borderColor: "rgba(99, 255, 132, 1)",
              borderWidth: 2,
            },
          ],
        },
        options: {
          responsive: true,
          title: {
            display: true,
            text: "Chart.js Time Scale",
          },
          scales: {
            xAxes: [
              {
                type: "time",
                position: "bottom",
                time: {
                  displayFormats: { day: "MM/YY" },
                  tooltipFormat: "DD/MM/YY",
                  unit: "month",
                },
              },
            ],
            yAxes: [
              {
                scaleLabel: {
                  display: true,
                  labelString: "value",
                },
              },
            ],
          },
        },
      });