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， 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之间的值

我被老板和我的一些经验丰富的同事用来调查谷歌排行榜和道场，但到目前为止，这两种工具，我只能找到许多教程和例子，可以让你绘制多个具有共同x轴但不具有共同y轴的系列。

使用这些工具，我正在寻找什么？还有其他工具可以让我这样做吗？我应该把它称为一天并放弃这个特定的冒险吗？

提前致谢

Answer 1

假设你想要这样的东西：

Sample Chart

以下代码将创建它：

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

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

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

2 个答案: