javascript - 在 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。

让我知道我是否可以做任何其他事情来提供帮助！