在html頁面上繪製多個具有相同y軸的系列

Question

在過去的幾天裏，我一直在試圖找到一個工具，它允許我繪製兩個圖形，它們具有相同的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，}

ÿ{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，}

然後畫出像這樣的線;

X {estRisk，estRisk}

ÿ{0，10}

其中 「estRisk」 將值0和1之間

我是針對查找到谷歌的圖表和我的老闆和我的一些更有經驗的同事做了dojo，但到目前爲止，對於這兩種工具，我只能找到許多教程和示例，這些教程和示例允許您繪製多個具有通用x軸的系列，但不具有共同的y軸。

我正在尋找哪些工具可能？有沒有其他工具可以讓我做到這一點？我是否應該在一天之內給它打電話，放棄這個特定的風險？

在此先感謝

Answer 1

假設你想要的東西，看起來像這樣：

下面的代碼將創建它：可以在道場可以實現類似

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} 
     ); 
} 

Answer 2

東西如下：

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(); 
     }); 
    } 
);