0

在过去的几天里，我一直在尝试找到一个工具，它可以让我在同一个图形上绘制两个图形，具有相同的 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}

是 {0, 10}

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

我的老板和我的一些更有经验的同事指示我研究谷歌图表和道场，但到目前为止，使用这两种工具，我只能找到大量的教程和示例，这些教程和示例允许您使用共同的 x 轴，但不具有共同的 y 轴。

使用这些工具中的任何一个，我正在寻找的东西是否可行？有没有其他工具可以让我做到这一点？我应该就这样收工并放弃这个特别的冒险吗？

提前致谢

4

2 回答 2

0

在 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();
        });
    }
);
于 2013-06-04T15:49:59.227 回答
0

假设你想要看起来像这样的东西：

示例图表

以下代码将创建它：

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}
          );
}
于 2013-06-04T02:41:26.477 回答