Javascript中的数组并使用chart.js
我正在尝试使用在一个折线图上显示许多不同的数据集 当前,如果每个数据集的数据点/日期数相同,则图形将正确绘制 样本数据:Javascript中的数组并使用chart.js,javascript,arrays,chart.js,Javascript,Arrays,Chart.js,我正在尝试使用在一个折线图上显示许多不同的数据集 当前,如果每个数据集的数据点/日期数相同,则图形将正确绘制 样本数据: 30/09/2015 - Capital One - 200 31/10/2015 - Capital One - 150 30/11/2015 - Capital One - 140 30/09/2015 - Cash - 500 31/10/2015 - Cash - 240 30/11/2015 - Cash - 50 30/09/2015 - Natwest - 50
30/09/2015 - Capital One - 200
31/10/2015 - Capital One - 150
30/11/2015 - Capital One - 140
30/09/2015 - Cash - 500
31/10/2015 - Cash - 240
30/11/2015 - Cash - 50
30/09/2015 - Natwest - 50
31/10/2015 - Natwest - 100
30/11/2015 - Natwest - 500
这将生成以下图表:
但是,如果每个数据集的数据点/日期数量不一致,例如下面的Natwest
30/09/2015 - Capital One - 200
31/10/2015 - Capital One - 150
30/11/2015 - Capital One - 140
30/09/2015 - Cash - 500
31/10/2015 - Cash - 240
30/11/2015 - Cash - 50
31/10/2015 - Natwest - 100
30/11/2015 - Natwest - 500
30/12/2015 - Natwest - 50
生成完全不正确的下图
我认为问题在于,在下面的代码中,data.labels
数组应该与chartjs\u balances.data
数组(balances
变量)长度相同,如果data.labels
中没有对应日期的余额,则chartjs\u balances.data
数组(余额
变量)应包含空值
目前:
data.labels = [30/09/2015, 31/10/2015, 30/11/2015, 30/12/2015]
data.datasets[0].data = [500.00, 240.00, 50.00]
data.datasets[1].data = [200.00, 150.00, 140.00]
data.datasets[2].data = [100.00, 500.00, 50.00]
我认为应该是:
data.labels = [30/09/2015, 31/10/2015, 30/11/2015, 30/12/2015]
data.datasets[0].data = [500.00, 240.00, 50.00, null]
data.datasets[1].data = [200.00, 150.00, 140.00, null]
data.datasets[2].data = [null, 100.00, 500.00, 50.00]
然而,我正在努力用Javascript实现这一点。我如何才能做到这一点
Javascript代码:
<script type="text/javascript">
var balancesSortByAccId = gon.balancesSortByAccId;
var data = {
labels: [],
datasets: []
};
//loop through all accounts to generate datasets
for(var account in gon.balancesSortByAccId){
var balances = [];
var dates = [];
var accountData = gon.balancesSortByAccId[account];
for (var i in accountData) {
balances.push(parseFloat(accountData[i].balance).toFixed(2));
dates.push(convertDate(accountData[i].date));
for (var date in dates)
if (data.labels.indexOf(dates[date]) <= -1)
data.labels.push(dates[date]);
}
var colour = getRandomColor();
var chartjs_balances = {
label: account,
fillColor: "rgba(220,220,220,0.2)",
strokeColor: colour,
pointColor: colour,
pointStrokeColor: colour,
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: balances
};
data.datasets.push(chartjs_balances);
}
var options = {
responsive: true,
tooltipTemplate: "<%=label%>: £<%= value %>",
multiTooltipTemplate: "<%=datasetLabel%>: £<%= value %>",
showTooltips: true,
};
//draw graph
var ctx = document.getElementById("history_canvas").getContext("2d");
var myLineChart = new Chart(ctx).Line(data, options);
//convert date to dd/mm/yyyy format
function convertDate(inputFormat) {
function pad(s) { return (s < 10) ? '0' + s : s; }
var d = new Date(inputFormat);
return [pad(d.getDate()), pad(d.getMonth()+1), d.getFullYear()].join('/');
}
//return random color for each dataset
function getRandomColor() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
</script>
原始数据的格式是什么?@MatthewHerbst我已经用格式和原始数据的定义更新了OP。
def index
@balances = Balance.all.order(date: :desc)
@balancesSortedByAccountId = Hash[
Balance.joins(:account).order(date: :asc).group_by(&:account_id).map{|acc_id, acc_details|
[acc_details.first.account.name, acc_details.map(&:attributes)]
}
]
gon.balancesSortByAccId = @balancesSortedByAccountId
end