时间戳

首页 > 解决方案 > Chart Js条形图上的映射问题

javascript - Chart Js条形图上的映射问题

问题描述

我的条形图有一个小问题。我正在使用Chart.js v 2.9.4。我已经成功地制作了图表。数据也来了。但我有一个小问题。让我解释一下。

我有 2 个数据集都从数据库中获取。数据集如下：

  1. 在某个日期接到的电话总数，例如（10 月 5 日的 5 个电话，10 月 6 日的 7 个电话，10 月 7 日的 3 个电话等）
  2. 特定日期收到的付费电话数量，例如（10 月 5 日 3 个电话，10 月 6 日 2 个电话）

我成功地获取了JSON格式的数据并将其放在条形图上。代码如下：

var data_s = response.call_data;
var data_b = response.bill_data;
var c_days = [];
var b_days = [];
var calls = [];
var b_calls = [];

for (var i in data_s) {
  var date = data_s[i].dated // date of the call (Total Call)
  var res = date.split("-");
  var year = res[0];
  var month = res[1];
  var day = res[2];
  var dm = day + "/" + month;

  c_days.push(dm);
  calls.push(data_s[i].calls); // Number of calls
}

for (var i in data_b) {
  var date = data_b[i].b_dated; // Date of Paid Call
  var res = date.split("-");
  var year = res[0];
  var month = res[1];
  var day = res[2];
  var dm = day + "/" + month;

  b_days.push(dm);
  b_calls.push(data_b[i].b_calls); // Number of paid calls
}

var c = c_days.concat(b_days);
var unique = c.filter(function(itm, i, c) {
  return i == c.indexOf(itm);
});

var chartdata = {
  labels: unique,
  datasets: [{
      label: 'Total Calls',
      backgroundColor: '#007bff',
      borderColor: '#007bff',
      hoverBackgroundColor: '#007bff',
      hoverBorderColor: '#666666',
      responsive: true,
      maintainAspectRatio: false,
      datasetFill: false,
      data: calls
    },
    {
      label: 'Billed Calls',
      backgroundColor: '#28a745',
      borderColor: '#28a745',
      hoverBackgroundColor: '#28a745',
      hoverBorderColor: '#666666',
      responsive: true,
      maintainAspectRatio: false,
      datasetFill: false,
      data: b_calls
    }
  ]
};

var graphTarget = $("#barChart");

var barGraph = new Chart(graphTarget, {
  type: 'bar',
  data: chartdata,
  options: barChartOptions
});

问题在于，在单个条形图上，日期数据管理不善。例如，10 月 7 日接到的电话总数可以是 10，而计费电话（付费电话）可以是 0。

我SQL从数据库中获取数据的查询只给出了该日期的调用总数。

条形图已成功绘制，但如前所述，付费通话数据管理得有点失误。

你可以说，如果我们在某天接到电话，就必须是付费电话。就像 10 月 5 日一样，我们总共可以打 15 个电话，但没有一个电话可以计费或支付。因此，条形图正确填充了总通话，但在付费通话中，它不会输入零，而是在 10 月 5 日的第二天计费或付费通话。

标签： javascriptjquerychart.js

解决方案

您应该将 x 轴定义为时间笛卡尔轴，并将数据提供为单个点、对象数组，每个都具有x（或者也可以t）和一个y属性。

无需使用for循环进行复杂的数据处理。可以改为通过Array.map()data方法将响应转换并直接分配给属性，如下所示。

var chartdata = {
  // omit labels 
  datasets: [{
    ...
    data: response.call_data.map(v => ({ x: v.dated, y: v.calls })) 
  },
  {
    ...
    data: response.bill_data.map(v => ({ x: v.b_dated, y: v.b_calls })) 
  }]
};

有关更多信息，请查看此答案。

来自上述答案的不同日期/时间格式显然需要适应您的数据格式和所需的显示。

推荐阅读