跳过' 0'数组中的值:创建svg图的问题

时间:2014-05-16 23:16:41

标签: javascript arrays loops svg graph

我被卡住了,一些帮助会非常感激......

http://onemorechris.co.uk/x/spreadsheettest2.php我显示年,月和周年谷歌电子表格中的日期数据&使用Snap SVG创建图形。该图表显示了每个月的日期值,其中一些是“0”和“0”。在图表上给出尖锐的峰值......

有没有办法跳过'值为0的月份中的几天,并将svg点从一个点直接绘制到下一个点,同时仍然使用正确的间距绘制图表中的点?这张图片显示的是我之后与之相比的那种效果> http://onemorechris.co.uk/x/graphIssue.jpg

function graphMonthCreator() {
var MaxDayDistance = 3700;
var distancesForGraphMonthArray = [null]; 

//convert distances in meters into % of MaxDistance, invert the % & convert it into a % for minGraphHeight
var currMonthDistance = eval('distancesArray' + currYear + '_' + currMonth);
for (g=0; g<currMonthDistance.length; g++) {
    distancesForGraphMonthArray.push(Math.round(minGraphHeight / 100 * ((100 - (currMonthDistance[g] / MaxDayDistance * 100)))));
}

//if month has less than 31 days, add extra 0 days so graph is always '31 days long'
for (a=29;a<=31;a++) {
    if (distancesForGraphMonthArray[a] == undefined) {
        distancesForGraphMonthArray.push(minGraphHeight);
    }
}

//start graph as a flat line 4px high
var array = [svgOffset,160,svgOffset,minGraphHeight,
(graphArrayDays[1]+svgOffset),minGraphHeight,
(graphArrayDays[2]+svgOffset),minGraphHeight,
(graphArrayDays[3]+svgOffset),minGraphHeight,
(graphArrayDays[4]+svgOffset),minGraphHeight,
(graphArrayDays[5]+svgOffset),minGraphHeight,
(graphArrayDays[6]+svgOffset),minGraphHeight,
(graphArrayDays[7]+svgOffset),minGraphHeight,
(graphArrayDays[8]+svgOffset),minGraphHeight,
(graphArrayDays[9]+svgOffset),minGraphHeight,
(graphArrayDays[10]+svgOffset),minGraphHeight,
(graphArrayDays[11]+svgOffset),minGraphHeight,
(graphArrayDays[12]+svgOffset),minGraphHeight,
(graphArrayDays[13]+svgOffset),minGraphHeight,
(graphArrayDays[14]+svgOffset),minGraphHeight,
(graphArrayDays[15]+svgOffset),minGraphHeight,
(graphArrayDays[16]+svgOffset),minGraphHeight,
(graphArrayDays[17]+svgOffset),minGraphHeight,
(graphArrayDays[18]+svgOffset),minGraphHeight,
(graphArrayDays[19]+svgOffset),minGraphHeight,
(graphArrayDays[20]+svgOffset),minGraphHeight,
(graphArrayDays[21]+svgOffset),minGraphHeight,
(graphArrayDays[22]+svgOffset),minGraphHeight,
(graphArrayDays[23]+svgOffset),minGraphHeight,
(graphArrayDays[24]+svgOffset),minGraphHeight,
(graphArrayDays[25]+svgOffset),minGraphHeight,
(graphArrayDays[26]+svgOffset),minGraphHeight,
(graphArrayDays[27]+svgOffset),minGraphHeight,
(graphArrayDays[28]+svgOffset),minGraphHeight,
(graphArrayDays[29]+svgOffset),minGraphHeight,
(graphArrayDays[30]+svgOffset),minGraphHeight,
(graphArrayDays[31]+svgOffset),minGraphHeight,
(graphArrayDays[31]+svgOffset),160];

//graph for individual months   
var graph2 = s2.polygon(array);
graph2.attr({
    id:'graphMonth',
    fill: '#DA4748',
    'opacity': 1
});

//animate graph to points from array
graph2.animate({"points":[svgOffset,160,svgOffset,minGraphHeight,
(graphArrayDays[1]+svgOffset),distancesForGraphMonthArray[1],
(graphArrayDays[2]+svgOffset),distancesForGraphMonthArray[2],
(graphArrayDays[3]+svgOffset),distancesForGraphMonthArray[3],
(graphArrayDays[4]+svgOffset),distancesForGraphMonthArray[4],
(graphArrayDays[5]+svgOffset),distancesForGraphMonthArray[5],
(graphArrayDays[6]+svgOffset),distancesForGraphMonthArray[6],
(graphArrayDays[7]+svgOffset),distancesForGraphMonthArray[7],
(graphArrayDays[8]+svgOffset),distancesForGraphMonthArray[8],
(graphArrayDays[9]+svgOffset),distancesForGraphMonthArray[9],
(graphArrayDays[10]+svgOffset),distancesForGraphMonthArray[10],
(graphArrayDays[11]+svgOffset),distancesForGraphMonthArray[11],
(graphArrayDays[12]+svgOffset),distancesForGraphMonthArray[12],
(graphArrayDays[13]+svgOffset),distancesForGraphMonthArray[13],
(graphArrayDays[14]+svgOffset),distancesForGraphMonthArray[14],
(graphArrayDays[15]+svgOffset),distancesForGraphMonthArray[15],
(graphArrayDays[16]+svgOffset),distancesForGraphMonthArray[16],
(graphArrayDays[17]+svgOffset),distancesForGraphMonthArray[17],
(graphArrayDays[18]+svgOffset),distancesForGraphMonthArray[18],
(graphArrayDays[19]+svgOffset),distancesForGraphMonthArray[19],
(graphArrayDays[20]+svgOffset),distancesForGraphMonthArray[20],
(graphArrayDays[21]+svgOffset),distancesForGraphMonthArray[21],
(graphArrayDays[22]+svgOffset),distancesForGraphMonthArray[22],
(graphArrayDays[23]+svgOffset),distancesForGraphMonthArray[23],
(graphArrayDays[24]+svgOffset),distancesForGraphMonthArray[24],
(graphArrayDays[25]+svgOffset),distancesForGraphMonthArray[25],
(graphArrayDays[26]+svgOffset),distancesForGraphMonthArray[26],
(graphArrayDays[27]+svgOffset),distancesForGraphMonthArray[27],
(graphArrayDays[28]+svgOffset),distancesForGraphMonthArray[28],
(graphArrayDays[29]+svgOffset),distancesForGraphMonthArray[29],
(graphArrayDays[30]+svgOffset),distancesForGraphMonthArray[30],
(graphArrayDays[31]+svgOffset),distancesForGraphMonthArray[31],
(graphArrayDays[31]+svgOffset),160
]},900,mina.easeinout);}

0 个答案:

没有答案