Jestem członkiem zespołu ZingChart i cieszę się, że mogę ci pomóc. Jest to z pewnością możliwe przy użyciu obiektów znacznikowych typu "poly". W tablicy obiektu markera points musisz określić wszystkie cztery punkty prostokąta, który w ogóle, będzie wyglądać mniej więcej tak:
[ [x1, y1], [x1, y2], [x2, y2], [x2, y1] ]
Teraz, jeśli umieścić swoje (X1, Y1) wartości i (x2, y2) wartości w dwóch tablicach, można zrobić coś takiego stworzyć niezbędną tablicę 4 zestawów współrzędnych:
function getRectCoords(x1y1, x2y2){
var coordsArray = []; // Empty array to hold the 4 points
coordsArray.push(x1y1); // Push bottom left point, [x1, y1]
coordsArray.push( // Push top left point, [x1, y2]
[ x1y1[0], x2y2[1] ]
);
coordsArray.push(x2y2); // Push top right point, [x2, y2]
coordsArray.push( // Push bottom right point, [x2, y1]
[ x2y2[0], x1y1[1] ]
);
return coordsArray; // [ [x1, y1], [x1, y2], [x2, y2], [x2, y1] ]
}
Następnie w ZingChart, można połączyć się z funkcji z poziomu wykresu JSON, tak:
...
"scale-y":{
"values":"0:10:1",
"markers":[
{
"type":"poly",
"background-color":"#EA212D",
"alpha":1.0,
"range":getRectCoords(first_x1y1, first_x2y2),
"value-range":true
}
]
}
...
Możesz to wszystko sprawdzić w this demo.
Nie jestem pewien, jak wyglądają twoje dane, ale powinieneś być w stanie zobaczyć na powyższym przykładzie, że ZingChart jest dość elastyczny, i że z odrobiną kreatywności, możesz wiele osiągnąć, szczególnie gdy używasz JavaScript w połączeniu z ZingChart.
Daj mi znać, jeśli mogę zrobić cokolwiek innego, aby pomóc!
