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

您可以在 this demo 中查看所有这些内容.

我不确定你的数据是什么样子的，但你应该能从上面的例子中看出 ZingChart 非常灵活，加上一点点创造力，你可以完成很多事情，尤其是当你使用 JavaScript 时与 ZingChart 结合使用。

如果我能帮上忙，请告诉我!