Javascript 带有动态数据的直线图（当前使用graphael库）_Javascript_Canvas_Charts_Raphael_Graphael

Javascript 带有动态数据的直线图（当前使用graphael库）

javascript canvas charts

Javascript 带有动态数据的直线图（当前使用graphael库）,javascript,canvas,charts,raphael,graphael,Javascript,Canvas,Charts,Raphael,Graphael,我试图建立一个动态数据直线图。我使用这是我的密码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Line Charts</title> <script src="raphael.js"></script> <script src="g.raphael.js"></scri

我试图建立一个动态数据直线图。我使用

这是我的密码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Line Charts</title>
  <script src="raphael.js"></script>
  <script src="g.raphael.js"></script>
  <script src="g.line.js"></script>
  <script language="JavaScript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script>
  window.onload = function () {
    var r = Raphael("holder");
    var yAxisTags = ["A","B","C","D"];
    var xData = [
        [2000,2015],//hack line, transparent; used to specify the range of the axis
        [2008,2014],[2004,2005],[2009,2010],[2000,2007],[2000,2014],[2010,2012]
    ];
    var yData = [
        [1, 1],//y coordinates of hack line
        [0, 0],[1, 1],[1, 1],[2, 2],[3, 3],[0,0],
        [0, 0]//hack line, transparent.Used to be able to draw straight lines
    ];
    var colors =  [
      'transparent',//line 1
      'red','green','green','purple','turquoise','black',
      'transparent'];//'transparent' IS A MUST, a hack to make it have a straight line
    var options = {
        nostroke: false,
        gutter: 90,
        axis: "0 0 1 1",
        symbol: "circle",
        axisxstep:10,
        axisystep:3,
        colors: colors
    };
    var lines = r.linechart(100, 10, 700, 300,xData,yData,options);

    // AXIS (x and y) have values but do not drawn the lines
    lines.axis[0].attr([{stroke: false}]);
    lines.axis[1].attr([{stroke: false}]);

    // Thickness of symbols (ie dots)
    lines.symbols.attr({ r: 4 });

    // Animate dots on first load
    lines.animate({"stroke-width": 1}, 1000);//ALL lines,1000 is animation time

    // Set text for Y axis coordinates (instead of numbers)
    $.each(lines.axis[1].text.items, function(index, label) {
      this.attr("text", yAxisTags[index]);
    });
};
</script>
</head>
  <body>
    <div id="holder" style="width:50%"></div>
  </body>
</html>

下面是它的样子：

所以基本上我想要一个与时间相关的跳跃+2年，从点到点的折线图，在Y轴上有标签，这是通过画直线来完成的，动态数据被输入到其中。当前代码仅适用于此特定配置，但一旦我开始修改数据，显示将不再准确：

x轴时间轴有车，时间不会跳跃+2年如果两年2 X坐标之间存在较大差异，则该线将绘制为点将不得不修改axisxstep，而且axisxstep不理解这些操作背后的逻辑是如何工作的等是否有一种技术/技巧可以让我想要的折线图概念使用动态数据？或者使用此库不可行？

对于陷入相同场景的任何人：

因为我正在使用，所以我最终使用了

它是一个指令包装器；它稳定且易于使用。

d3.js当然值得一看，如果没有其他具体的回复，你会陷入困境。@Ian感谢man提供的提示！