[英]How to add an array to my line data?
我正在嘗試使用Chart.js創建一個圖表,該圖表顯示隨時間推移的跟蹤使用情況。 我將所有圖表信息收集到現在要與圖表一起使用的數組中。 唯一的問題是我不確定該怎么做。 我已經包含了變量和for循環,因此請顯示信息已正確填充。 我還將數據信息與要放置每個數組的位置的注釋一起包括在內。
這些是我的變量以及創建數組的方式:
//variables to use
var ArrayForDailyUsage = [];
var ArrayForTotalUsage = [];
var theTotalUsageSoFar = 0;
var ArrayForTheDate = [];
var ArrayForHoldingTheUsageInformation = [];
var usageplan = 1024;
這就是我設置折線圖數據的方式:
var data = {
labels: //This is where I want to add ArrayForTheDate[]
["Aug 1", "Aug 2", "Aug 3", "Aug 4", "Aug 5"],
datasets: [{
label: "Usage Plan",
fillColor: "rgba(255,255,255,0.2)", //adds the color below the line
strokeColor: "rgba(224,0,0,1)", //creates the line
pointColor: "rgba(244,0,0,1)", //gets rid of the circle
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: //this is where I want to add my ArrayForHoldingTheUsageInformation[]
[usageplan, usageplan, usageplan, usageplan, usageplan]
}, {
label: "Overall Usage",
fillColor: "rgba(48,197,83,0.2)",
strokeColor: "rgba(48,197,83,1)",
pointColor: "rgba(48,197,83,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(48,197,83,1)",
data: //this is where I want to add ArrayForTotalUsage[]
[15, 25, 45, 70, 80]
}, {
label: "Daily Usage",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: //this is where I want to add ArrayForDailyUsage[]
[15, 10, 20, 25, 10]
}
]
};
如果您想知道,這就是我添加圖表的方式
var maxUsage = 1024;
var maxSteps = 5;
var myLineChart = new Chart(ctx).Line(data, {
pointDot: false,
scaleOverride: true,
scaleSteps: maxSteps,
scaleStepWidth: Math.ceil(maxUsage / maxSteps),
scaleStartValue: 0
});
為什么我不能這樣做:labels:ArrayOfDates [];
有沒有簡單的方法可以將數組添加到圖表數據中? 我該如何處理? 先感謝您! 如果我不清楚或您有任何疑問,請告訴我!!!
您是否只想使用在數據設置中聲明的數組? 如果是這樣,您可以直接引用它們
var data = {
labels: ArrayForTheDate,
datasets: [{
label: "Usage Plan",
fillColor: "rgba(0,0,0,0.2)", //adds the color below the line
strokeColor: "rgba(224,0,0,1)", //creates the line
pointColor: "rgba(244,0,0,1)", //gets rid of the circle
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: ArrayForHoldingTheUsageInformation
}, {
label: "Overall Usage",
fillColor: "rgba(48,197,83,0.2)",
strokeColor: "rgba(48,197,83,1)",
pointColor: "rgba(48,197,83,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(48,197,83,1)",
data: ArrayForTotalUsage
}, {
label: "Daily Usage",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: ArrayForDailyUsage
}
]
};
這是一個小提琴使用的一些數據,以證明它可以正常工作http://jsfiddle.net/leighking2/35o54t2L/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.