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

您可以在this demo中查看所有内容。

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

如果我能提供任何其他帮助，请告诉我们！