Диаграмма js разной длины меток и наборов данных - PullRequest
Новая
       4

Диаграмма js разной длины меток и наборов данных

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

Как организовать данные в зависимости от наборов данных? 

// Bar Chart Example
var ctx = document.getElementById("myBarChart");
var myLineChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: [ "Mar",  "Apr", ],
    datasets: [ 
     {
        label: "serj",
        backgroundColor: "#11564D",
        borderColor: "rgba(2,117,216,1)",
        data: [{x: "Mar", y: 128400}, {x: "Apr", y: 53500}, ],
      }, 
     {
        label: "aisha",
        backgroundColor: "#508D2F",
        borderColor: "rgba(2,117,216,1)",
        data: [{x: "Mar", y: 58500}, {x: "Apr", y: 12000}, ],
      }, 
     {
        label: "serikzhan",
        backgroundColor: "#3F22F5",
        borderColor: "rgba(2,117,216,1)",
        data: [{x: "Apr", y: 8000}, ],
      }, 
     ],
  },
  options: {
    scales: {
      xAxes: [{
        time: {
          unit: 'month',
        },
        gridLines: {
          display: false
        },
        ticks: {
          maxTicksLimit: 6
        }
      }],
      yAxes: [{
        ticks: {
          min: 0,
          max: 150000,
          maxTicksLimit: 5
        },
        gridLines: {
          display: true
        }
      }],
    },
    legend: {
      display: false
    }
  }
});

Все наборы данных и метки создаются автоматически. Проблема в том, что все данные начинаются с марта независимо от осей х. У разных пользователей разные данные за разные месяцы. Разве мы можем решить проблему только с графиком js api?

charjs data

1 Ответ

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

Ваш подход почти в порядке. Единственное, что нужно изменить, - это удалить data.labels и определить xAxis следующим образом: 

xAxes: [{
  offset: true,
  type: 'time',
  time: {
    parser: 'MMM',
    unit: 'month',
    displayFormats: {
      month: 'MMM'
    }
  },

Обратите внимание, что диаграмма. js использует Момент. js для функциональности оси времени. Поэтому вам следует использовать связанную версию диаграммы. js, которая включает в себя момент. js в одном файле. 

var ctx = document.getElementById("myBarChart");
var myLineChart = new Chart(ctx, {
  type: 'bar',
  data: {
    datasets: [ 
     {
        label: "serj",
        backgroundColor: "#11564D",
        borderColor: "rgba(2,117,216,1)",
        data: [{x: "Mar", y: 128400}, {x: "Apr", y: 53500}]
      }, 
     {
        label: "aisha",
        backgroundColor: "#508D2F",
        borderColor: "rgba(2,117,216,1)",
        data: [{x: "Mar", y: 58500}, {x: "Apr", y: 12000}]
      }, 
     {
        label: "serikzhan",
        backgroundColor: "#3F22F5",
        borderColor: "rgba(2,117,216,1)",
        data: [{x: "Apr", y: 8000}]
      }
     ]
  },
  options: {
    scales: {
      xAxes: [{
        offset: true,
        type: 'time',
        time: {
          parser: 'MMM',
          unit: 'month',
          displayFormats: {
            month: 'MMM'
          }
        },
        gridLines: {
          display: false
        },
        ticks: {
          maxTicksLimit: 6
        }
      }],
      yAxes: [{
        ticks: {
          min: 0,
          max: 150000,
          maxTicksLimit: 5
        },
        gridLines: {
          display: true
        }
      }],
    },
    legend: {
      display: false
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="myBarChart" height="90"></canvas>
...