Javascript 在html页面上绘制具有相同y轴的多个系列

在过去的几天里，我一直在试图找到一种工具，它可以让我在同一个平面上绘制两个图形，具有相同的y轴和不同的x轴坐标。特别是，我想画一条曲线和一条在x轴上特定点穿过该曲线的线

曲线的x点和y点已经知道，并将硬编码到页面中，但直线的x坐标值将由程序生成

我希望找到一个工具，在那里我可以简单地做这样的事情：

绘制这条曲线

x{0， 0.05, 0.1, 0.15, 0.2, 0.25, 0.3, 0.35, 0.4, 0.45, 0.5, 0.55, 0.6, 0.65, 0.7, 0.75, 0.8, 0.85, 0.9, 0.95, 1. }

y{0， 9.6, 6. 2.5, 1. 0.6, 0.3, 0.24, 0.1, 0.08, 0.02, 0.009, 0.0009, 0.00009, 0.000009, 0.0000009, 0, 0, 0, 0, 0 }

然后为这条线画出这样的图

x{estRisk，estRisk}

y{0，10}

其中“estRisk”将是介于0和1之间的值

我的老板和一些经验更丰富的同事让我研究谷歌图表和dojo，但到目前为止，使用这两种工具，我只能找到许多教程和示例，它们允许您使用公共x轴绘制多个系列，但不使用公共y轴

这些工具中的任何一个都可能实现我所寻找的吗？有没有其他工具可以让我这样做？我是不是应该到此为止，放弃这次冒险

---

提前感谢

假设您想要这样的东西：

以下代码将创建它：

function drawVisualization() {
  //Set EstRisk Variable

  var EstRisk = 0.23;

  // Create and populate the data table.
  var data = new google.visualization.DataTable()
  data.addColumn('number', 'X');
  data.addColumn('number', 'Y');
  data.addColumn('number', 'EstRisk');
  data.addRows([
    [0, 0, null],
    [0.05, 9.6, null],
    [0.1, 6, null],
    [0.15, 2.5, null],
    [0.2, 1, null],
    [0.25, 0.6, null],
    [0.3, 0.3, null],
    [0.35, 0.24, null],
    [0.4, 0.1, null],
    [0.45, 0.08, null],
    [0.5, 0.02, null],
    [0.55, 0.009, null],
    [0.6, 0.0009, null],
    [0.65, 0.00009, null],
    [0.7, 0.000009, null],
    [0.75, 0.0000009, null],
    [0.8, 0, null],
    [0.85, 0, null],
    [0.9, 0, null],
    [0.95, 0, null],
    [1, 0, null],
  ]);

  data.addRows([
    [EstRisk, null, 0],
    [EstRisk, null, 10],
  ]);

  // Create and draw the visualization.
  new google.visualization.LineChart(document.getElementById('visualization')).
      draw(data, {curveType: "function",
                  width: 500, height: 400}
          );
}

---

在Dojo中可以实现类似的功能，如下所示：

require(["dojo/domReady", "dojox/charting/Chart", "dojox/charting/axis2d/Default",
        "dojox/charting/plot2d/Lines", "dojox/charting/themes/Julie"],
    function(domReady, Chart, Axis, Lines, Theme){
        domReady(function(){
            var estrisk = 0.23;
            var chart = new Chart("chart");
            chart.addAxis("x", {type: Axis});
            chart.addAxis("y", {type: Axis, vertical: true });
            chart.addPlot("curve", {type: Lines, tension: "x"});
            chart.addPlot("line", {type: Lines });
            chart.addSeries("1", 
                         [ {x:0,y:0}, {x:0.05,y:9.6}, {x:0.1,y:6},
                           {x:0.15,y:2.5}, {x:0.2,y:1}, {x:0.25,y:0.6},
                           {x:0.3,y:0.3}, {x:0.35,y:0.24}, {x:0.4,y:0.1},          
                           {x:0.45,y:0.08}, {x:0.5,y:0.02}, {x:0.55,y:0.009},
                           {x:0.6,y:0.0009}, {x:0.65,y:0.00009}, {x:0.7,y:0.000009},
                           {x:0.75,y:0.0000009}, {x:0.8,y:0}, {x:0.85,y:0},
                           {x:0.9,y:0}, {x:0.95,y:0}, {x:1,y:0} ], 
                       { plot: "curve"});
            chart.addSeries("2",
                         [ { x: estrisk, y: 0}, { x: estrisk, y: 10} ], 
                       { plot: "line" });
            chart.render();
        });
    }
);

---

非常感谢，伙计们，这正是我所看到的福卡拉达，考虑问题的答案，如果这提供了你需要的解决方案。