Plotlyjs正方形曲线

嘿我正在使用plotlyjs中序绘制曲线正方形的面积图。我想要达到的最终结果是这样的： Plotlyjs正方形曲线

我试图达到上述结果，使用plotlyjs库。我创建了3个正方形，每个正方形都有不同的颜色：绿色，黄色和红色。每个正方形都是一个区域，如果一个点位于绿色区域，这意味着它们的健康状况良好，如果它位于黄色区域，则其健康状况为警告，如果它位于红色区域，则健康状况为危险等等...

现在我正在尝试使广场有一个弯曲的线条，以便它会显示为像原始图片中的弧线。

我正在寻找解决方案来解决我的问题，我想但是使用'路径'而不是'方形'的形状，但是我该如何绘制弧线？

我会很高兴，如果一个plotlyjs专家可以帮助我的情况下，在此先感谢。

这是我已经实现了使用至今的例子：

var d3 = Plotly.d3 
 

 
function normal_array(mean, stddev, size){ 
 
    var arr = new Array(size), i; 
 
    // from http://bl.ocks.org/nrabinowitz/2034281 
 
    var generator = (function() { 
 
     return d3.random.normal(mean, stddev); 
 
    }()); 
 
    
 
    for(i=0; i< arr.length; i++){ 
 
     arr[i] = generator(); 
 
    } 
 
    return arr; 
 
} 
 

 
var x0 = normal_array(1, 0, 300); 
 
var y0 = normal_array(1, 0, 300); 
 

 
var x1 = normal_array(1, 0, 200); 
 
var y1 = normal_array(1, 0, 200) 
 

 
var x2 = normal_array(1, 0, 200); 
 
var y2 = normal_array(1, 0, 200); 
 

 

 
var data = [ 
 
    {  
 
     x: x0, 
 
     y: y0, 
 
     mode: 'markers' 
 
    }, { 
 
     x: x1, 
 
     y: y1, 
 
     mode: 'markers'     
 
    }, { 
 
     x: x2, 
 
     y: y2, 
 
     mode: 'markers'   
 
    }, { 
 
     x: x1, 
 
     y: y0, 
 
     mode: 'markers'   
 
    }    
 
]; 
 

 
var layout = { 
 
    shapes: [ 
 
     { 
 
      type: 'square', 
 
      xref: 'x', 
 
      yref: 'y', 
 
      x0: 0, 
 
      y0: 0, 
 
      x1: 1, 
 
      y1: 1, 
 
      opacity: 0.7, 
 
      fillcolor: 'green', 
 
      line: { 
 
       color: 'green' 
 
      } 
 
     }, 
 
     { 
 
      type: 'square', 
 
      xref: 'x', 
 
      yref: 'y', 
 
      x0: 0.5, 
 
      y0: 0.5, 
 
      x1: 1, 
 
      y1: 1, 
 
      opacity: 0.7, 
 
      fillcolor: 'orange', 
 
      line: { 
 
       color: 'orange' 
 
      } 
 
     }, 
 
     { 
 
      type: 'square', 
 
      xref: 'x', 
 
      yref: 'y', 
 
      x0: 0.75, 
 
      y0: 0.75, 
 
      x1: 1, 
 
      y1: 1, 
 
      opacity: 0.7, 
 
      fillcolor: 'red', 
 
      line: { 
 
       color: 'red' 
 
      } 
 
     } 
 
     
 
    ], 
 
    showlegend: false 
 
} 
 

 
Plotly.newPlot('myDiv', data, layout);

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="myDiv" style="width: 100%; height: 100%;">

编辑： 我已经成功到达以下结果，SVG是倒挂我不不知道如何在正确的方向上旋转它。 http://codepen.io/Barak/pen/apYvjW

来源

2017-02-01 Brk

你可以尝试以下方法：

添加3种形状，绿色长方形，黄色和通过layout.shapes一个红色圆圈（通过for循环的片段进行）
确保的形状在通过layout.x/yaxis.showgrid: false
经由layer.shapes.layer: 'below'
隐藏网格背景添加标记为散点图

var myDiv = document.getElementById('myDiv'); 
 
var types = ['square', 'circle', 'circle']; 
 
var pos = [1, 0.7, 0.4]; 
 
var colors = ['green', 'yellow', 'red']; 
 
var layout = { 
 
    height: 400, 
 
    width: 400, 
 
    xaxis: {range: [0, 1], showgrid: false}, 
 
    yaxis: {range: [0, 1], showgrid: false}, 
 
    shapes: [], 
 
}; 
 
for (var i = 0; i < 3; i +=1) { 
 
    layout.shapes.push({ 
 
     type: types[i], 
 
     x0: 1 - pos[i], 
 
     y0: 1 - pos[i], 
 
     x1: 1 + pos[i], 
 
     y1: 1 + pos[i], 
 
     fillcolor: colors[i], 
 
     line: { 
 
      color: colors[i] 
 
     }, 
 
     layer: 'below' 
 
    }) 
 
} 
 

 
var data = [{ 
 
    type: 'scatter', 
 
    x: [0.5], 
 
    y: [0.3], 
 
    mode: "markers", 
 
    marker: { 
 
     color: 'black', 
 
     size: 10}, 
 
    }] 
 
Plotly.plot(myDiv, data, layout);

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script> 
 
<div id='myDiv'></div>

来源

2017-02-01 19:03:10

Plotlyjs正方形曲线

回答

相关问题