Question

我正在尝试使用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
});

为什么我不能这样做：标签：ArrayOfDates [];

有没有一种简单的方法可以将我的数组添加到图表数据中？我该如何处理？先感谢您！如果我不清楚或者您有任何疑问，请告诉我！

Answer 1

是否只是想使用您在数据设置中声明的数组？如果是这样，你可以直接引用它们

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/

如何将数组添加到我的行数据？

1 个答案: