Zeichnen von Formen als Werte auf ZingChart

Question

Ich habe eine Verpflichtung, wo meine Datenwerte sind zweidimensionale Objekte, die ich in der Tabelle (Streuung) ziehen muss:

Auf dieser Grafik habe ich zwei Werte (rot und grün), die jeweils aus einem Rechteck mit (x1, y1) - (x2-y2) Koordinaten bestehen.

Wissen Sie, wie dies mit der ZingChart Library erreicht werden kann? Ist es überhaupt möglich? Wenn nicht, kennen Sie eine alternative Javascript-Bibliothek, die ich verwenden kann, um diese Funktionalität zu implementieren?

Danke!

Answer 1

Ich bin im ZingChart-Team, und ich bin glücklich, Ihnen zu helfen. Dies ist sicherlich mit Marker-Objekten vom Typ "poly" möglich. Im points Array des Markers Objekt, müssen Sie alle vier Punkte des Rechtecks ​​spezifizieren, die insgesamt, etwa wie folgt aussehen würde:

[ [x1, y1], [x1, y2], [x2, y2], [x2, y1] ] 

Nun, wenn Sie Ihre (x1, y1) stellen Werte und (x2, y2) Werte in zwei Arrays, Sie so etwas tun könnte die notwendige Anordnung von vier Sätze von Koordinaten zu erstellen:

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] ] 
} 

Dann in ZingChart, können Sie Ihre Funktion innerhalb der Tabelle JSON nennen könnte, so:

... 
"scale-y":{ 
    "values":"0:10:1", 
    "markers":[ 
     { 
      "type":"poly", 
      "background-color":"#EA212D", 
      "alpha":1.0, 
      "range":getRectCoords(first_x1y1, first_x2y2), 
      "value-range":true 
     } 
    ] 
} 
... 

Sie können das alles in this demo überprüfen.

Ich bin nicht sicher, wie Ihre Daten aussehen, aber Sie sollten aus dem obigen Beispiel sehen können, dass ZingChart ziemlich flexibel ist, und dass Sie mit einer Prise Kreativität viel erreichen können, besonders wenn Sie es verwenden JavaScript in Verbindung mit ZingChart.

Lassen Sie mich wissen, wenn ich noch etwas anderes tun kann, um zu helfen!