Chartjs -在给定标签之间填充日期

pbgvytdp  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(233)

我已经用Chartjs做了几个小时的实验,但我不确定这是否可行。我有一些按日期排序的数据,但并不是所有日期都包括在内。例如:

const salesChart = new Chart(document.getElementById('graph-sales'),
    {
        type: 'line',
        data: {
            labels: ['Aug 23','Aug 26','Aug 31','Sep 02'],
            datasets: [{
                label: 'Sales',
                borderColor: '#ccc',
                data: [2750.00,1100.00,3080.00,4320.00],
            }]
        }
    }
);

Chartjs将此数据绘制为4个数据点,并使用

这样的线将它们连接起来
这很好,但我希望在图表上添加中间日期,数据点值为0。因此,本质上就像传递以下数据:

labels: ['Aug 23','Aug 24','Aug 25','Aug 26','Aug 27','Aug 28','Aug 29','Aug 30','Aug 31','Sep 01','Sep 02'],
datasets: [{
    label: 'Sales',
    borderColor: '#ccc',
    data: [2750.00,0,0,1100.00,0,0,0,0,3080.00,0,4320.00],
}]

我看过时间刻度,但不能让它们工作。文档说我需要一个时间适配器,但没有使用它的例子,所以我不知道这是什么意思。

bbuxkriu

bbuxkriu1#

在提供数据的后端执行此操作可能会更容易;但是如果您想在前端用JavaScript编写,这段代码就可以工作。
我的方法是使用一个定义的自执行函数,该函数返回一个包含两个数组的数组。
第一个数组名为finalLabels,包含原始标签中提供的日期之间(含)的所有日期字符串。
也就是['Aug 23', 'Aug 24', 'Aug 25', 'Aug 26', 'Aug 27', 'Aug 28', 'Aug 29', 'Aug 30', 'Aug 31', 'Sep 01', 'Sep 02']
返回的第二个数组称为finalDatas,它包含原始标签的同一索引处的所有原始数据值;而在先前未定义该值的情况下则为零。
这就给了我们:[2750, 0, 0, 1100, 0, 0, 0, 0, 3080, 0, 4320]

工作代码代号:https://codepen.io/vpolston/pen/NWMgwOw

我的帐户没有嵌入图片的功能,但这是你最终得到的:是的。
JS系统

const labels = ['Aug 23','Aug 26','Aug 31','Sep 02'];
const data = [2750.00,1100.00,3080.00,4320.00];

const datasets = (function () {

  const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul","Aug", "Sep", "Oct", "Nov", "Dec"];

  /* define start and end date from labels and create date objects */
  const startDateString = labels[0];
  const endDateString = labels[labels.length - 1];
  const startDateObj = new Date(startDateString);
  const endDateObj = new Date(endDateString);

  /* create empty dates array to hold dates within range */
  let dates = [];

  /* 
  create currentDateObj var to increment in while loop 
  loop through, add currentDateObj to array, increment until false
  */
  let currentDateObj = new Date(startDateString);
  while( currentDateObj <= endDateObj ){

    /* format date to match the provided label and push to dates array */
    let dateString = currentDateObj.toDateString();
    let month = months[currentDateObj.getMonth()];
    let day = currentDateObj.getDate();

    if( day < 10 ){
      day = '0' + day
    };

    let date = month + ' ' + day; 
    dates.push(date);

    /* increment CurrentDateObj */
    currentDateObj.setDate(currentDateObj.getDate() + 1);

  };

  /* 
  use counter to loop through original datas
  */
  let valueExistsCounter = 0;

  let finalLabels = [];
  let finalDatas = [];

  for( const [index, date] of dates.entries() ){

    if( labels.includes(date) ){

      /* if date was provided in labels get the data value */
      finalLabels.push(date);
      finalDatas.push(data[valueExistsCounter]);

      valueExistsCounter += 1

    } else {

      /* set date value to 0 */
      finalLabels.push(date);
      finalDatas.push(0);

    }

  };

  return [finalLabels, finalDatas]

}());

const finalLabels = datasets[0];
const finalDatas = datasets[1];

/* now we can build the chart */
const ctx = document.getElementById('myChart').getContext('2d');

const myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: finalLabels,
    datasets: [{
      label: 'Sales',
      'fill': true,
      borderColor: '#ccc',
      backgroundColor: 'rgba(204,204,204,0.5)',
      tension: 0.2,
      data: finalDatas
    }]
  },
  options: {
    scales: {
      x: {
        grid: {
          color: 'rgba(204,204,204,0.1)'
        }
      },
      y: {
        grid: {
          color: 'rgba(204,204,204,0.1)'
        }
      }
    }
  }
});

HTML语言

<!-- Canvas -->
<div class="chartContainer">
  <canvas id="myChart"></canvas>
</div>

<!-- include Chart.js 3.9.1  -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.js" integrity="sha512-d6nObkPJgV791iTGuBoVC9Aa2iecqzJRE0Jiqvk85BhLHAPhWqkuBiQb1xz2jvuHNqHLYoN3ymPfpiB1o+Zgpw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

CSS系统

body {
  background-color: #0d1117;
}

.chartContainer {
  width: 800px;
  height: 400px;
}

我想这就够了吧?如果这有帮助的话,请马克回答。

相关问题