簡體   English   中英

如何在我的行數據中添加數組?

[英]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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM