在ZingChart上绘制形状作为值

Question

我有一个要求,我的数据值是我必须在图表中绘制的二维对象(散点图):

在此图表中,我有两个值(红色和绿色),每个值由一个带有(x1,y1) - (x2-y2)坐标的矩形组成.

你知道如何使用ZingChart图书馆实现这一目标吗？它甚至可能吗？如果没有,你知道我可以用来实现这个功能的替代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
        }
    ]
}
...

您可以在此演示中查看所有内容.

我不确定你的数据是什么样的,但是你应该能够从上面的例子中看到ZingChart非常灵活,并且通过一些创造力,你可以完成很多,特别是当你使用JavaScript时ZingChart.

如果我能做任何其他事情来帮助我,请告诉我!