绘制形状作为ZingChart

Question

值I有一个要求，其中我的数据值是二维对象，我必须在图表中绘制（散射）：

在此图表中，我有两个值（红色和绿色），每个由具有（x1，y1） - （x2-y2）坐标的矩形组成。

你知道怎么用ZingChart Library实现这个功能吗？ 它甚至有可能吗？ 如果不是，你知道一个我可以用来实现这个功能的替代javascript库吗？

谢谢！

Answer 1

我在ZingChart团队，我很乐意帮助你。这当然可以使用“poly”类型的标记对象。在points阵列标记的对象，你需要指定的矩形区域，，干脆，会是这个样子的所有四点：现在

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

，如果你把你的（X1，Y1）值和（x2，y2）值成两个阵列，你可以做这样的事情来创建的4套坐标的必要数组：

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

然后，在ZingChart，你可以从图表中JSON调用你的函数，像这样：

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

你可以在this demo查看全部。

我不确定你的数据是什么样的，但是你应该能够从上面的例子中看到ZingChart非常灵活，而且用一些创造性，你可以完成很多工作，特别是当你使用JavaScript与ZingChart结合使用。

让我知道如果我可以做任何事情来帮助！