我正在尝试将我的二维数组输入到 js 数据输入图表中,以基本上在图表上显示每月每天的视图。
我的数据在图表的切换上按城市分类,但这不是我的问题。
我的数据:代表 6 个城市 (6) 的 6 个主要输入 [Array(12), Array(12), Array(12), Array(12), Array(12), Array(12)]
每个城市 /Array(12) 是每个城市每 12 个月的数据
每个 Array(12) 每天包含 Array(31) 我的图表代码:
var ctx = jQuery("#LineChart").get(0).getContext("2d");
var options = {
animation: false,
bezierCurve: false,
pointDot: false,
datasetFill: false,
responsive: true,
scaleGridLineColor: "yellow",
scaleLabel: "<%=value + '.00%' %>",
scaleFontFamily: "'Open Sans', sans-serif",
scaleFontColor: "#fff",
scaleOverride: true,
scaleSteps: 8,
scaleStepWidth: 10,
scaleStartValue: -40,
tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%=value + '%' %>",
tooltipCornerRadius: 3,
multiTooltipTemplate: "<%=value + '%' %>",
tooltipTitleFontFamily: "'Open Sans', sans-serif",
legend: {
display: false,
labels: {
fontColor: '#BABABA',
boxWidth: 1,
// boxHeight: 1,
// usePointStyle: true,
}
}
};
var chartlabel = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
var enableCheck = function () {
SPOn = jQuery('.sp').hasClass('enabled');
NCOn = jQuery('.nc').hasClass('enabled');
SPAOn = jQuery('.sp-avg').hasClass('enabled');
NCAOn = jQuery('.nc-avg').hasClass('enabled');
SPYOn = jQuery('.spy-avg').hasClass('enabled');
NCYOn = jQuery('.ncy-avg').hasClass('enabled');
if (!(SPOn)) {
SP = {};
} else {
SP = {
label: cities[0].name,
strokeColor: "#4EAEC4",
pointColor: "#4EAEC4",
borderColor: '#4EAEC4',
data: generalData[0],
fill: false,
pointRadius: 0,
borderWidth: 2
};
};
if (!(NCOn)) {
NC = {};
} else {
NC = {
label: cities[1].name,
strokeColor: "#EA3223",
pointColor: "#EA3223",
borderColor: '#EA3223',
data: generalData[1],
fill: false,
pointRadius: 0,
borderWidth: 2
};
};
if (!(SPAOn)) {
SPA = {};
} else {
SPA = {
label: cities[2].name,
strokeColor: "#1341BF",
pointColor: "#1341BF",
borderColor: '#1341BF',
data: generalData[3],
fill: false,
pointRadius: 0,
borderWidth: 2
};
};
if (!(NCAOn)) {
NCA = {};
} else {
// I had to switch series for the values to be right!!!!!!!
NCA = {
label: cities[3].name,
strokeColor: "#CC5490",
pointColor: "#CC5490",
borderColor: '#CC5490',
data: generalData[2],
fill: false,
pointRadius: 0,
borderWidth: 2
};
};
if (!(SPYOn)) {
SPY = {};
} else {
SPY = {
label: cities[4].name,
strokeColor: "#707070",
pointColor: "#707070",
borderColor: '#707070',
data: generalData[4],
fill: false,
pointRadius: 0,
borderWidth: 2
};
};
if (!(NCYOn)) {
NCY = {};
} else {
NCY = {
label: cities[5].name,
strokeColor: "greenyellow",
pointColor: "greenyellow",
borderColor: 'greenyellow',
data: generalData[5],
fill: false,
pointRadius: 0,
borderWidth: 2
};
};
};
enableCheck();
data = {
labels: chartlabel,
datasets: [SPA, NCA, SP, NC, SPY, NCY]
};
baseChart = newChart = new Chart(ctx, {
type: "line",
data: data,
options: options
});
currentChart = baseChart;
jQuery('.chart-toggles a').click(function () {
currentChart.destroy();
jQuery(this).toggleClass('enabled');
enableCheck();
data = {
labels: chartlabel,
datasets: [SPA, NCA, SP, NC, SPY, NCY]
};
newChart = new Chart(ctx, {
type: "line",
data: data,
options: options
});
currentChart = newChart;
});
我正在尝试实现类似于下图的东西
编辑 我还尝试使数据输入看起来像这样:
SP = {
label: cities[0].name,
strokeColor: "#4EAEC4",
pointColor: "#4EAEC4",
borderColor: '#4EAEC4',
data: {
labels: ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17',
'18','19','20','21','22','23','24','25','26','27','28','29','30','31'],
dataset:[generalData[0][1],generalData[0][2],generalData[0][3],generalData[0][4],generalData[0][5],generalData[0][6],generalData[0][7],generalData[0][8],generalData[0][9],generalData[0][10],generalData[0][11],generalData[0][12] ]
},
fill: false,
pointRadius: 0,
borderWidth: 2
};
但它仍然没有工作。