Блог

Главная - Вопросы по программированию - Проблема при построении гистограммы с пользовательской осью x с месяцем и годом в chart.js

Проблема при построении гистограммы с пользовательской осью x с месяцем и годом в chart.js

#javascript #jquery #chart.js #chart.js2

#javascript #jquery #chart.js #диаграмма.js2

Вопрос:

Мы пытаемся построить гистограмму, используя chart.js и хотел отобразить месяц и год по оси x, но не смог этого сделать.

Мы хотим построить график, как показано ниже:

https://drive.google.com/file/d/1ezvUdDyp3uNLP3pdumXKHcXGNeBVQw63/view

Фрагмент кода:

 var timeFormat = 'DD/MM/YYYY';
var data = [
  { date: "1/1/2020  11:35:44 PM", file: "file1", value: 0.0056 },
  { date: "1/1/2020 23:35", file: "file2", value: 0.00103 },
  { date: "1/1/2020 23:35", file: "file3", value: 0.00513 },
  { date: "1/1/2020 23:59", file: "file4", value: 0.00589 },
  { date: "3/2/2020 0:24", file: "file5", value: 0.03017 },
  { date: "3/2/2020 0:30", file: "file6", value: 0.00347 },
  { date: "3/2/2020 0:43", file: "file7", value: 0.00784 },
  { date: "5/2/2020 0:51", file: "file8", value: 0.02477 },
  { date: "5/2/2020 1:08", file: "file9", value: 0.00858 },
  { date: "8/2/2020 2:03", file: "file10", value: 0.00753 },
  { date: "8/2/2020 2:36", file: "file11", value: 0.0091 },
  { date: "1/2/2021 4:38", file: "file12", value: 0.01175 },
  { date: "2/4/2021 5:15", file: "file13", value: 0.01092 }
];

var ctx = document.getElementById("CanvasFileData").getContext('2d');
var myChart = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: {
    responsive: true,
    title: {
      display: true,
      text: "File data"
    },
    scales: {
      xAxes: [{
        type: "time",
        time: {
          format: timeFormat,
          tooltipFormat: 'll'
        },
        scaleLabel: {
          display: true,
          labelString: 'Date'
        }
      }],
      yAxes: [{
        scaleLabel: {
          display: true,
          labelString: 'value'
        },
        ticks: {
          beginAtZero: true
        }
      }]
    },
    tooltips: {
      callbacks: {
        label: function(tooltipItem) {
          return "File: "   tooltipItem.file   ", Date:"   tooltipItem.date   ", Value:"   tooltipItem.value;
        }
      }
    }
  }
}); 
 <canvas id="CanvasFileData" style="width: 100%"></canvas>

Ответ №1:

Ваши строки файлов должны быть равномерно распределены по доступному пространству по оси x. Использование временной оси в этом контексте не является вариантом, поскольку она не будет правильно соответствовать позициям столбцов.

Потребуется время, чтобы объяснить все подробно, чтобы получить то, что вы ищете. Поэтому вам лучше изучить приведенный ниже исполняемый код и посмотреть, как это можно сделать.

 var data = [
  { date: "1/1/2020  11:35:44 PM", file: "file1", value: 0.0056 },
  { date: "1/1/2020 23:35", file: "file2", value: 0.00103 },
  { date: "1/1/2020 23:35", file: "file3", value: 0.00513 },
  { date: "1/1/2020 23:59", file: "file4", value: 0.00589 },
  { date: "3/2/2020 0:24", file: "file5", value: 0.03017 },
  { date: "3/2/2020 0:30", file: "file6", value: 0.00347 },
  { date: "3/2/2020 0:43", file: "file7", value: 0.00784 },
  { date: "5/2/2020 0:51", file: "file8", value: 0.02477 },
  { date: "5/2/2020 1:08", file: "file9", value: 0.00858 },
  { date: "8/2/2020 2:03", file: "file10", value: 0.00753 },
  { date: "8/2/2020 2:36", file: "file11", value: 0.0091 },
  { date: "1/2/2021 4:38", file: "file12", value: 0.01175 },
  { date: "2/4/2021 5:15", file: "file13", value: 0.01092 }
];
const moments = data.map(o => moment(o.date, 'M/D/YYYY'));
const months = moments.map(m => m.format('MMM'));
const monthLabels = months.map((m, i) => i == 0 || months[i - 1] != m ? m : '〃');
const years = moments.map(m => m.format('YYYY'));
const yearLabels = years.map((y, i) => i == 0 || years[i - 1] != y ? y : '');

new Chart('CanvasFileData', {
  type: 'bar',
  data: {
    labels: data.map(o => o.file),
    datasets: [{
      data: data.map(o => o.value),
      backgroundColor: 'rgb(68, 114, 196)',
      barPercentage: 0.5
    }]
  },
  options: {
    responsive: true,
    title: {
      display: true,
      text: "File data"
    },
    legend: {
      display: false
    },
    scales: {
      xAxes: [{
        ticks: {
          minRotation: 90,
          padding: -32
        },
        gridLines: {
          drawOnChartArea: false,
          tickMarkLength: 40
        }
      },
      {
        offset: true,
        labels: monthLabels,
        gridLines: {
          display: false
        },   
      },
      {
        offset: true,
        labels: yearLabels,
        gridLines: {
          display: false
        },
        scaleLabel: {
          display: true,
          labelString: 'Date'
        }        
      }],
      yAxes: [{
        scaleLabel: {
          display: true,
          labelString: 'value'
        },
        ticks: {
          beginAtZero: true
        }
      }]
    },
    tooltips: {
      callbacks: {
        label: tooltipItem => "File: "   tooltipItem.xLabel   ", Date:"   data[tooltipItem.index].date   ", Value:"   tooltipItem.value
      }
    }
  }
}); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="CanvasFileData" height="150"></canvas>