Как сделать Chart. js с динамиками c месяцев по оси X - PullRequest
Новая
       12

Как сделать Chart. js с динамиками c месяцев по оси X

0 голосов
/ 29 апреля 2020

Я пытаюсь создать диаграмму. js с динамической c осью X, которая всегда будет использовать следующие 7 месяцев в качестве отметок для оси X.

Но я ' У меня две проблемы:

  1. Линии не отображаются на моем графике
  2. Ось X показывает только первый и последний месяц, ни один из промежуточных месяцев.

Вот пример, который я сделал в краске, чтобы показать, чего я пытаюсь достичь:

enter image description here

И вот код, который я имею до сих пор: 

/* Build the charts */
var ctx = document.getElementById('ROIchart').getContext('2d');
var chart = new Chart(ctx, {
  // The type of chart we want to create
  type: 'line',

  // The data for our dataset
  data: {
    datasets: [{
      label: 'Paid Search and Leads',
      backgroundColor: 'red',
      borderColor: 'red',
      data: [10, 10, 10, 10, 10, 10, 10],
    }, {
      label: 'SEO and Content',
      backgroundColor: 'green',
      borderColor: 'green',
      data: [0, 2, 8, 21, 57, 77, 100],
      fill: true,
    }]
  },

  // Configuration options go here
  options: {
    responsive: true,
    scales: {
      xAxes: [{
        type: 'time',
        time: {
          unit: 'month'
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="ROIchart"></canvas>

1 Ответ

1 голос
/ 29 апреля 2020

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

/* Build the charts */
var ctx = document.getElementById('ROIchart').getContext('2d');
var array1 = [10, 10, 10, 10, 10, 10, 10];
var months = []
for (let i = 0; i < array1.length; i++) {
  months.push(moment().year(2020).month(i+1).date(0).startOf('month'))
}
var chart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: months,
    datasets: [{
      label: 'Paid Search and Leads',
      backgroundColor: 'red',
      borderColor: 'red',
      data: array1,
    }, {
      label: 'SEO and Content',
      backgroundColor: 'green',
      borderColor: 'green',
      data: [0, 2, 8, 21, 57, 77, 100],
      fill: true,
    }]
  },
  options: {
    responsive: true,
    scales: {
      xAxes: [{
        type: 'time',
        time: {
          unit: 'month'
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.js"></script>
<canvas id="ROIchart"></canvas>
...