映射问题图表Js条形图

Question

我的条形图有一个小问题。我正在使用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日的第二天计费或付费呼叫。

Answer 1

您应该将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 })) 
}]
};

想了解更多信息，请看下面的答案。

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